计算属性
实际应用中,我们通常需要对数据进行加工
如: 指定日期格式,将数字相加... 等,此时可使用ko.computed()。当数据发生改变是,KO会使用computed重新计算
DEMO1
更改firstName,lastName值后改变fullName
1
2
3
4
5
6
7
8
|
var
AppViewModel =
function
() {<br>
var
me =
this
;
me.firstName = ko.observable(
'Bob'
);
me.lastName = ko.observable(
'Smith'
);
me.fullName = ko.computed(
function
() {
return
me.firstName() +
" "
+ me.lastName();
},
this
);
}
ko.applyBindings(
new
AppViewModel());
|
绑定到View上
1
2
3
|
<
p
>First name: <
input
data-bind="value: firstName"/></
p
>
<
p
>Last name: <
input
data-bind="value: lastName"/></
p
>
<
h2
>Hello, <
span
data-bind="text: fullName"/>!</
h2
>
|
DEMO2
修改fullName,从而更新firstName,lastName的值
<p>First name: <input data-bind="value: firstName"/></p> <p>Last name: <input data-bind="value: lastName"/></p> <h2>Hello, <span data-bind="value: fullName"/>!</h2>
self.fullName = ko.computed({ read: function () { return me.firstName() + " " + me.lastName(); }, write: function (value) { var lastSpacePos = value.lastIndexOf(" "); if (lastSpacePos > 0) { // Ignore values with no space character me.firstName(value.substring(0, lastSpacePos)); // Update "firstName" me.lastName(value.substring(lastSpacePos + 1)); // Update "lastName" } }, owner: me });
DEMO3
金额格式的自动转换(包括精度和格式)已经垃圾字符的过滤
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p><br/>
var parseModel = function() { var me = this; me .price = ko.observable(25.99); me .formattedPrice = ko.computed({ read: function() { return '$' + me.price().toFixed(2); }, write: function(val) { val = parseFloat(value.replace(/[^\.\d]/g, "")); me.price(isNaN(val ) ? 0 : val ); }, owner: me }); }; ko.applyBindings(new parseModel());
DEMO4
过滤并验证用户输入
<p>Enter a numeric value: <input data-bind="value: attemptedValue"/> <span data-bind="visible:lastInputWasValid()">验证通过</span> </p>
var MyViewModel = function() { var me = this; me.acceptedNumericValue = ko.observable(123); me.lastInputWasValid = ko.observable(true); me.attemptedValue = ko.computed({ read: me.acceptedNumericValue, write: function (value) { if (isNaN(value)) me.lastInputWasValid(false); else { me.lastInputWasValid(true); me.acceptedNumericValue(value); // Write to underlying storage } }, owner: me }); } ko.applyBindings(new MyViewModel());
DEMO 5
下拉菜单
<select>常用的data-bind参数:
•options :
指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项。如果是ko.observableArray(),当动态增加或移除阵列元素时,下拉选项也会马上跟着增减。
•optionsText, optionsValue :
用来产生下拉选项的数组元素可以是具有多个属性的JavaScript对象,通过optionText, optionValue设定属性名称字符串,我们可以指定用哪个属性当成<option>的文字内容,哪个属性当成value 。
•value :
指向ViewModel的特定属性,属性一般以ko.observable()声明。如此当下拉菜单选取新值,所选的<option> value值会更新到ViewModel属性上;而一旦该属性被程序修改或因使用者输入改变,下拉菜单也会自动切到新值对应的<option >选项上。
•selectedOptions :
针对可多选( multiple )的<select>,selectedOptions可绑定到ko.observableArray()类型属性,该数组使会即时反应使用者所选取的项目集合;而变更该obervableArray数组的元素项目,也会立刻变更对应option的selected状态。
<select data-bind ="options:selectOptions, optionsText: 'name', optionsValue: 'id', value:result"> </select><br/> 排行:<span data-bind ="text:result" ></span ><br/> <input type ="button" value ="Third" data-bind ="click:changeToYoung"/>
var MyViewModel = function() { var me = this; me.selectOptions = [ {name:"First",id:1}, {name:"Second",id:2}, {name:"Third",id:3} ]; me.result = ko.observable(2); //只能检测 value me.changeToYoung = function(){ me.result(3); //ko.observable()声明的属性,使用propName("...")方式改变其值,才能通知相关UI产生联动效果 } } ko.applyBindings(new MyViewModel());
解析:
- ViewModel定义了selectOptions数组(假设选项不会动态变化,故用一般数组即可,不用ko.observableArray),数组元素对象各有t、v两个属性分别当做<option>的文字跟值,而下拉菜单的选取结果要反应到result这个ko.observable()属性上
- 为了观察选取结果,再增加一个<span data-bind="text: result">即时反应result内容。
- 声明一个chageToPhone()函数,将result的值强制指定为"Third" 。