（二）Knockout - ViewModel 的使用

计算属性

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

如: 指定日期格式，将数字相加... 等，此时可使用ko.computed()。当数据发生改变是，KO会使用computed重新计算

DEMO1

更改firstName，lastName值后改变fullName

 var AppViewModel = function() {    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上

<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());