（二）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());