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

作者：倉儲大叔，張占嶺，

榮譽：微軟MVP

QQ：853066980

支付寶掃一掃，為大叔打賞!