絕大多數(shù)程序都需要從服務(wù)器端獲取數(shù)據(jù)，但是由于服務(wù)器不知道observable的概念是什么，它只支持簡(jiǎn)單的JavaScript對(duì)象(通常是序列化以后的JSON)，mapping插件可以讓你很方便地將簡(jiǎn)單JavaScript對(duì)象mapp到帶有observable值的view model。你也可以自己寫JavaScript代碼將從服務(wù)器獲取的數(shù)據(jù)來構(gòu)建 view model，mapping插件只是一種很好的替代而已。

下載

Version 2.0 (最小版本8.6kb)

例子：手工mapping

顯示當(dāng)前服務(wù)器時(shí)間和你網(wǎng)站上的當(dāng)前用戶數(shù)。你應(yīng)該使用如下的view model來代表你的這些信息：

var viewModel = {  
    serverTime: ko.observable(),  
    numUsers: ko.observable()  
} 

然后綁定view model到HTML元素上，如下：

The time on the server is: <span data-bind='text: serverTime'></span> 
and <span data-bind='text: numUsers'></span> user(s) are connected. 

由于view model屬性是observable的，在他們變化的時(shí)候，KO會(huì)自動(dòng)更新綁定的HTML元素。

接下來，從服務(wù)器獲取最新的數(shù)據(jù)。或許每隔5秒你要調(diào)用一次Ajax請(qǐng)求(例如，使用jQuery的$.getJSON或$.ajax函授)：

var data = getDataUsingAjax();          // Gets the data from the server 

然后，服務(wù)器返回和下面相似的JSON數(shù)據(jù)：

{  
    serverTime: '2010-01-07',  
    numUsers: 3  
} 

最后，用這些數(shù)據(jù)更新你的view model(不使用mapping插件)，代碼如下：

// Every time data is received from the server:  
viewModel.serverTime(data.serverTime);  
viewModel.numUsers(data.numUsers); 

為了使數(shù)據(jù)顯示在頁面上，所有的屬性都要像這樣寫代碼。如果你的數(shù)據(jù)結(jié)構(gòu)很復(fù)雜的話(例如，包含子對(duì)象或者數(shù)組)，那就維護(hù)起來就相當(dāng)痛苦。mapping插件就是來讓你讓你的JavaScript簡(jiǎn)單對(duì)象(或JSON結(jié)構(gòu))轉(zhuǎn)換成observable的view model的。

例子：使用ko.mapping

通過mapping插件創(chuàng)建view model，直接使用ko.mapping.fromJS函數(shù)來創(chuàng)建：

var viewModel = ko.mapping.fromJS(data); 

它會(huì)自動(dòng)將data里所有的屬性創(chuàng)建成observable類型的屬性。你可以通過ko.mapping.fromJS 函數(shù)定期從服務(wù)器獲取數(shù)據(jù)，然后更新你的view model：

// Every time data is received from the server:  
ko.mapping.fromJS(data, viewModel); 

如何mapping?

對(duì)象的所有屬性都被轉(zhuǎn)換成observable類型值，如果獲取的對(duì)象的值改變了，就會(huì)更新這個(gè)observable類型的值.

數(shù)組也被轉(zhuǎn)換成了observable數(shù)組，如果服務(wù)器更新改變了數(shù)組的個(gè)數(shù)，mapping插件也會(huì)添加或者刪除相應(yīng)的item項(xiàng)，也會(huì)盡量保持和原生JavaScript數(shù)組相同的order順序。

Unmapping

如果你想讓map過的對(duì)象轉(zhuǎn)換成原來的JavaScript對(duì)象，使用如下方式：

var unmapped = ko.mapping.toJS(viewModel); 

會(huì)創(chuàng)建一個(gè)unmapped對(duì)象，只包含你之前map過的對(duì)象屬性，換句話說，你在view model上手工添加的屬性或者函數(shù)都會(huì)被忽略的，唯一例外的是_destroy屬性是可以u(píng)nmapped回來的，因?yàn)槟銖膋o.observableArray里destroy一個(gè)item項(xiàng)的時(shí)候會(huì)生成這個(gè)屬性。 請(qǐng)參考“高級(jí)用戶”小節(jié)如何配置使用。

與JSON字符串一起使用

如果你的Ajax調(diào)用返回的是JSON字符串(而不是反序列化后的JavaScript對(duì)象)，你可以使用ko.mapping.fromJSON函數(shù)來創(chuàng)建或者更新你的view model。用ko.mapping.toJSON實(shí)現(xiàn)unmap。

使用.from/toJSON函數(shù)處理JSON字符串和使用.from/toJS函數(shù)處理JS對(duì)象是等價(jià)的。

高級(jí)用法

有時(shí)候，在使用ko.mapping.fromJS的時(shí)候，可能有必要去使用mapping的高級(jí)用法來定義mapping的詳細(xì)過程，以后定義了，以后再調(diào)用的時(shí)候就不必再定義了。這里有一些情形，你可能需要使用這些option。

#p#

用法1：使用keys來使對(duì)象unique化

你有一個(gè)JavaScript對(duì)象，如下：

var data = {  
    name: 'Scot',  
    children: [  
        { id: 1, name: 'Alicw' }  
    ]  
} 

使用map插件，你可以將它map到view model上(沒任何問題)：

var viewModel = ko.mapping.fromJS(data); 

現(xiàn)在，數(shù)據(jù)被更新成如下這樣：

var data = {  
    name: 'Scott',  
    children: [  
        { id: 1, name: 'Alice' }  
    ]  
} 

這里發(fā)生了兩件事：name從Scot變成了Scott，children[0].name從Alicw變成了Alice。你可以用如下代碼更新view model：

ko.mapping.fromJS(data, viewModel); 

于是，name像我們期望的一樣更新了，但是在children數(shù)組里，子項(xiàng)Alicw被刪除而新項(xiàng)Alice被添加到數(shù)組里。這不是我們所期望的，我們期望的是只是把name從Alicw更新成Alice，不是替換整個(gè)item項(xiàng)。發(fā)生的原因是，默認(rèn)情況下mapping plugin插件只是簡(jiǎn)單地比較數(shù)組里的兩個(gè)對(duì)象是否相等。 因?yàn)镴avaScript里{ id : 1, name : 'Alicw' }和{ id : 1, name : 'Alice' }是不相等的，所以它認(rèn)為喜歡將新項(xiàng)替換掉老項(xiàng)。

解決這個(gè)問題，你需要聲明一個(gè)key讓mapping插件使用，用來判斷一個(gè)對(duì)象是新對(duì)象還是舊對(duì)象。代碼如下：

var mapping = {  
    'children': {  
        key: function (data) {  
            return ko.utils.unwrapObservable(data.id);  
        }  
    }  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping); 

這樣，每次map的時(shí)候，mapping插件都會(huì)檢查數(shù)組項(xiàng)的id屬性來判斷這個(gè)數(shù)組項(xiàng)是需要合并的還是全新replace的。

用法2：用create自定義對(duì)象的構(gòu)造器

如果你想自己控制mapping，你也可以使用create回調(diào)。使用回調(diào)可以讓你自己控制mapping。

舉例，你有一個(gè)像這樣的JavaScript對(duì)象：

var data = {  
    name: 'Graham',  
    children: [  
        { id: 1, name: 'Lisa' }  
    ]  
} 

如果你想自己map children 數(shù)組，你可以這樣聲明：

var mapping = {  
    'children': {  
        create: function (options) {  
            return new myChildModel(options.data);  
        }  
    }  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping); 

支持create回調(diào)的options參數(shù)是一個(gè)JavaScript對(duì)象，包含如下：

◆ data： JavaScript對(duì)象，包含child用到的數(shù)據(jù)

◆ parent：child對(duì)象所屬的父對(duì)象或者數(shù)組

當(dāng)然，在內(nèi)部的create回調(diào)里，你也可以再次調(diào)用ko.mapping.fromJS。一個(gè)例子就是：如果你想讓初始的JavaScript對(duì)象帶有額外的依賴屬性dependent observables：

var myChildModel = function (data) {  
    ko.mapping.fromJS(data, {}, this);   
 
    this.nameLength = ko.dependentObservable(function () {  
        return this.name().length;  
    }, this);  
} 

用法3：用update自定義對(duì)象的updating

你也可以使用update 回調(diào)來自定義一個(gè)對(duì)象如何更新。它接受一個(gè)需要替代的對(duì)象以及和create 回調(diào)一樣的options參數(shù)，你應(yīng)該return更新后的值。

update 回調(diào)使用的options參數(shù)是一個(gè)JavaScript對(duì)象，包含如下內(nèi)容：

◆ data：JavaScript對(duì)象，包含child用到的數(shù)據(jù)

◆ parent：child對(duì)象所屬的父對(duì)象或者數(shù)組

◆ observable：如果屬性是observable的，這將會(huì)寫入到實(shí)際的observable里

例子，在數(shù)據(jù)顯示之前，在新數(shù)據(jù)后面附加額外的字符串：

var data = {  
    name: 'Graham',  
}   
 
var mapping = {  
    'name': {  
        update: function(options) {  
            return options.data + 'foo!';  
        }  
    }  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping);  
alert(viewModel.name()); 

alert的結(jié)果是：Grahamfoo!。

#p#

用法4：使用ignore忽略不需要map的屬性

如果在map的時(shí)候，你想忽略一些屬性，你可以使用ignore累聲明需要忽略的屬性名稱集合：

var mapping = {  
    'ignore': ["propertyToIgnore", "alsoIgnoreThis"]  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping); 

你聲明的忽略數(shù)組被編譯到默認(rèn)的ignore數(shù)組里。你可以像下面代碼一樣來維護(hù)它：

var oldOptions = ko.mapping.defaultOptions().ignore;  
ko.mapping.defaultOptions().ignore = ["alwaysIgnoreThis"]; 

用法5：使用include聲明需要map的屬性

默認(rèn)情況下，當(dāng)map你的view model回到JS對(duì)象是時(shí)候，只map原始view model里擁有的屬性(除了例外的_destroy屬性)，不過，你可以使用include參數(shù)來定制：

var mapping = {  
    'include': ["propertyToInclude", "alsoIncludeThis"]  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping); 

你聲明的include數(shù)組被編譯到默認(rèn)的include數(shù)組里，默認(rèn)只有_destroy。 你可以像這樣來維護(hù)：

var oldOptions = ko.mapping.defaultOptions().include;  
ko.mapping.defaultOptions().include = ["alwaysIncludeThis"]; 

用法6：使用copy來復(fù)制屬性

默認(rèn)情況下，map的時(shí)候是把所有的值都轉(zhuǎn)換成observable的，如果你只是想copy屬性值而不是替換成observable的，你可以將屬性名稱添加到copy數(shù)組：

var mapping = {  
    'copy': ["propertyToCopy"]  
}  
 
var viewModel = ko.mapping.fromJS(data, mapping); 

你聲明的copy數(shù)組被編譯到默認(rèn)的copy數(shù)組里，默認(rèn)值是空。你可以像這樣來維護(hù)：

var oldOptions = ko.mapping.defaultOptions().copy;  
ko.mapping.defaultOptions().copy = ["alwaysCopyThis"]; 

用法7：Specifying the update target

在上面的例子，如果你想再一個(gè)class內(nèi)map，你可以使用第三個(gè)參數(shù)作為操作的目標(biāo)，例如：

ko.mapping.fromJS(data, {}, someObject); // overwrites properties on someObject 

所以，如果你想map一個(gè)JavaScript對(duì)象到this上，你可以這樣聲明：

ko.mapping.fromJS(data, {}, this); 

從多數(shù)據(jù)源map

你可以通過多次使用ko.mapping.fromJS 來將多個(gè)JS對(duì)象的數(shù)據(jù)源map到一起，例如：

var viewModel = ko.mapping.fromJS(alice, aliceMappingOptions);  
ko.mapping.fromJS(bob, bobMappingOptions, viewModel); 

你聲明的mapping選項(xiàng)option在每次調(diào)用的時(shí)候都會(huì)合并。

Map以后的observable數(shù)組

map插件map以后生產(chǎn)的observable數(shù)組，帶有幾個(gè)額外的函數(shù)來處理帶有keys的mapping：

◆ mappedRemove

◆ mappedRemoveAll

◆ mappedDestroy

◆ mappedDestroyAll

◆ mappedIndexOf

它們是和ko.observableArray里的函數(shù)等價(jià)的，不同是他們通過key來處理對(duì)象。例如：

var obj = [  
    { id: 1 },  
    { id: 2 }  
]  
 
var result = ko.mapping.fromJS(obj, {  
    key: function (item) {  
        return ko.utils.unwrapObservable(item.id);  
    }  
});  
 
result.mappedRemove({ id: 2 }); 

map過的observable數(shù)組，除了上面的函數(shù)還支持一個(gè)mappedCreate函數(shù)：

var newItem = result.mappedCreate({ id: 3 }); 

首先會(huì)檢查key(id=3)在數(shù)組里是否存在(如果存在則拋出異常)，然后，如果有create和 update回調(diào)的話會(huì)調(diào)用他們，最后創(chuàng)建一個(gè)新對(duì)象，并將新對(duì)象添加到數(shù)組然后返回該新對(duì)象。

下載

Version 2.0 (最小版本8.6kb)

原文：http://www.cnblogs.com/TomXu/archive/2011/11/29/2257054.html

【編輯推薦】

1. Knockout應(yīng)用開發(fā)指南之Hello World
2. 用JavaScript評(píng)估用戶輸入密碼的強(qiáng)度（Knockout版）
3. Knockout應(yīng)用開發(fā)指南之創(chuàng)建自定義綁定
4. Knockout應(yīng)用開發(fā)指南之模板綁定
5. Knockout應(yīng)用開發(fā)指南之監(jiān)控屬性(Observables)