（一）Knockout - ViewModel 的使用

计算属性

实际应用中，我们通常需要对数据进行加工

如: 指定日期格式，将数字相加... 等，此时可使用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" 。