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屬性，呵呵．

返回目錄