MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

返回目录

对于一个ＪＳ对象来说，如果希望将所有属性进行监视，在之前我们需要一个个对属性添加ko.observable方法，而有了Mapping插件后，它可以帮助我们这件事．

在Mapping出现之前

var data={
        serverTime:ko.observable( '2010-01-07'),
        numUsers: ko.observable(3),
        realUsers: ko.observable(3),
}

我们需要对data对象里所有属性添加ko.observable方法，才可以对它进行监视．

Mapping出现之后

假设有这样一个场景，我们在对象里的realUsers需要跟随numUsers进行变化，这时，我们使用Mapping进行对象的KO处理，然后再使用ko.computed方法进行绑定，看一下代码

 　 var data = {
        serverTime: '2010-01-07',
        numUsers: 3,
        realUsers: 3,
    }
    var M = ko.mapping.fromJS(data);//data对象里所有属性添加ko属性
    M.realUsers = ko.computed(function () {
        return M.numUsers() ? M.numUsers() * 2 : 0;
    });
    ko.applyBindings(M, document.getElementById("model2"));

对应的ＨＴＭＬ代码如下

<div id="model2">
    <input type="text" data-bind="value:serverTime" />
    <input type="text" data-bind="value:numUsers,valueUpdate: 'afterkeydown'" />
    <input type="text" data-bind="value:realUsers" />

</div>

通过这个例子，让我们知道如何快速的为ＪＳ对象添加KO属性，呵呵．

返回目录