## Mapping插件
Knockout設計成允許你使用任何JavaScript對象作為view model。必須view model的一些屬性是observable的，你可以使用KO綁定他們到你的UI元素上，當這些observable值改變的時候，這些UI元素就會自動更新。
絕大多數程序都需要從服務器端獲取數據，但是由于服務器不知道observable的概念是什么，它只支持簡單的JavaScript對象（通常是序列化以后的JSON），mapping插件可以讓你很方便地將簡單JavaScript對象mapp到帶有observable值的view model。你也可以自己寫JavaScript代碼將從服務器獲取的數據來構建 view model，mapping插件只是一種很好的替代而已。
?**下載**
????[Version 2.0](https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output)?（最小版本8.6kb）
**例子：手工mapping**
顯示當前服務器時間和你網站上的當前用戶數。你應該使用如下的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的，在他們變化的時候，KO會自動更新綁定的HTML元素。
接下來，從服務器獲取最新的數據。或許每隔5秒你要調用一次Ajax請求（例如，使用jQuery的$.getJSON或$.ajax函授）：
~~~
var data = getDataUsingAjax(); // Gets the data from the server
~~~
然后，服務器返回和下面相似的JSON數據：
~~~
{
serverTime: '2010-01-07',
numUsers: 3
}
~~~
最后，用這些數據更新你的view model（不使用mapping插件），代碼如下：
~~~
// Every time data is received from the server:
viewModel.serverTime(data.serverTime);
viewModel.numUsers(data.numUsers);
~~~
為了使數據顯示在頁面上，所有的屬性都要像這樣寫代碼。如果你的數據結構很復雜的話（例如，包含子對象或者數組），那就維護起來就相當痛苦。mapping插件就是來讓你讓你的JavaScript簡單對象（或JSON結構）轉換成observable的view model的。
**例子：使用ko.mapping**
通過mapping插件創建view model，直接使用ko.mapping.fromJS函數來創建：
~~~
var viewModel = ko.mapping.fromJS(data);
~~~
它會自動將data里所有的屬性創建成observable類型的屬性。你可以通過ko.mapping.fromJS 函數定期從服務器獲取數據，然后更新你的view model：
~~~
// Every time data is received from the server:ko.mapping.fromJS(data, viewModel);
~~~
**如何mapping？**
??? 對象的所有屬性都被轉換成observable類型值，如果獲取的對象的值改變了，就會更新這個observable類型的值.
??? 數組也被轉換成了observable數組，如果服務器更新改變了數組的個數，mapping插件也會添加或者刪除相應的item項，也會盡量保持和原生JavaScript數組相同的order順序。
**Unmapping**
如果你想讓map過的對象轉換成原來的JavaScript對象，使用如下方式：
~~~
var unmapped = ko.mapping.toJS(viewModel);
~~~
會創建一個unmapped對象，只包含你之前map過的對象屬性，換句話說，你在view model上手工添加的屬性或者函數都會被忽略的，唯一例外的是_destroy屬性是可以unmapped回來的，因為你從ko.observableArray里destroy一個item項的時候會生成這個屬性。 請參考“高級用戶”小節如何配置使用。
**與JSON字符串一起使用**
如果你的Ajax調用返回的是JSON字符串（而不是反序列化后的JavaScript對象），你可以使用ko.mapping.fromJSON函數來創建或者更新你的view model。用ko.mapping.toJSON實現unmap。
使用.from/toJSON函數處理JSON字符串和使用.from/toJS函數處理JS對象是等價的。
**高級用法**
有時候，在使用ko.mapping.fromJS的時候，可能有必要去使用mapping的高級用法來定義mapping的詳細過程，以后定義了，以后再調用的時候就不必再定義了。這里有一些情形，你可能需要使用這些option。
**用法1：使用keys來使對象unique化**
你有一個JavaScript對象，如下：
~~~
var data = {
name: 'Scot',
children: [
{ id: 1, name: 'Alicw' }
]
}
~~~
使用map插件，你可以將它map到view model上（沒任何問題）：
~~~
var viewModel = ko.mapping.fromJS(data);
~~~
現在，數據被更新成如下這樣：
~~~
var data = {
name: 'Scott',
children: [
{ id: 1, name: 'Alice' }
]
}
~~~
這里發生了兩件事：name從Scot變成了Scott，children[0].name從Alicw變成了Alice。你可以用如下代碼更新view model：
~~~
ko.mapping.fromJS(data, viewModel);
~~~
于是，name像我們期望的一樣更新了，但是在children數組里，子項Alicw被刪除而新項Alice被添加到數組里。這不是我們所期望的，我們期望的是只是把name從Alicw更新成Alice，不是替換整個item項。發生的原因是，默認情況下mapping plugin插件只是簡單地比較數組里的兩個對象是否相等。 因為JavaScript里{ id : 1, name : 'Alicw' }和{ id : 1, name : 'Alice' }是不相等的，所以它認為喜歡將新項替換掉老項。
解決這個問題，你需要聲明一個key讓mapping插件使用，用來判斷一個對象是新對象還是舊對象。代碼如下：
~~~
var mapping = {
'children': {
key: function (data) {
return ko.utils.unwrapObservable(data.id);
}
}
}
var viewModel = ko.mapping.fromJS(data, mapping);
~~~
這樣，每次map的時候，mapping插件都會檢查數組項的id屬性來判斷這個數組項是需要合并的還是全新replace的。
**用法2：用create自定義對象的構造器**
如果你想自己控制mapping，你也可以使用create回調。使用回調可以讓你自己控制mapping。
舉例，你有一個像這樣的JavaScript對象：
~~~
var data = {
name: 'Graham',
children: [
{ id: 1, name: 'Lisa' }
]
}
~~~
如果你想自己map children 數組，你可以這樣聲明：
~~~
var mapping = {
'children': {
create: function (options) {
return new myChildModel(options.data);
}
}
}
var viewModel = ko.mapping.fromJS(data, mapping);
~~~
支持create回調的options參數是一個JavaScript對象，包含如下：
* data： JavaScript對象，包含child用到的數據
* parent：child對象所屬的父對象或者數組
?當然，在內部的create回調里，你也可以再次調用ko.mapping.fromJS。一個例子就是：如果你想讓初始的JavaScript對象帶有額外的依賴屬性dependent observables：
~~~
var myChildModel = function (data) {
ko.mapping.fromJS(data, {}, this);
this.nameLength = ko.dependentObservable(function () {
return this.name().length;
}, this);
}
~~~
**用法3：用update自定義對象的updating**
你也可以使用update 回調來自定義一個對象如何更新。它接受一個需要替代的對象以及和create 回調一樣的options參數，你應該return更新后的值。
update 回調使用的options參數是一個JavaScript對象，包含如下內容：
* data：JavaScript對象，包含child用到的數據
* parent：child對象所屬的父對象或者數組
* observable：如果屬性是observable的，這將會寫入到實際的observable里
?例子，在數據顯示之前，在新數據后面附加額外的字符串：
~~~
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的結果是：Grahamfoo!。
**用法4：使用ignore忽略不需要map的屬性**
如果在map的時候，你想忽略一些屬性，你可以使用ignore累聲明需要忽略的屬性名稱集合：
~~~
var mapping = {
'ignore': ["propertyToIgnore", "alsoIgnoreThis"]
}
var viewModel = ko.mapping.fromJS(data, mapping);
~~~
你聲明的忽略數組被編譯到默認的ignore數組里。你可以像下面代碼一樣來維護它：
~~~
var oldOptions = ko.mapping.defaultOptions().ignore;
ko.mapping.defaultOptions().ignore = ["alwaysIgnoreThis"];
~~~
**用法5：使用include聲明需要map的屬性**
默認情況下，當map你的view model回到JS對象是時候，只map原始view model里擁有的屬性（除了例外的_destroy屬性），不過，你可以使用include參數來定制：
~~~
var mapping = {
'include': ["propertyToInclude", "alsoIncludeThis"]
}
var viewModel = ko.mapping.fromJS(data, mapping);
~~~
你聲明的include數組被編譯到默認的include數組里，默認只有_destroy。 你可以像這樣來維護：
~~~
var oldOptions = ko.mapping.defaultOptions().include;
ko.mapping.defaultOptions().include = ["alwaysIncludeThis"];
~~~
**用法6：使用copy來復制屬性**
默認情況下，map的時候是把所有的值都轉換成observable的，如果你只是想copy屬性值而不是替換成observable的，你可以將屬性名稱添加到copy數組：
~~~
var mapping = {
'copy': ["propertyToCopy"]
}
var viewModel = ko.mapping.fromJS(data, mapping);
~~~
你聲明的copy數組被編譯到默認的copy數組里，默認值是空。你可以像這樣來維護：
~~~
var oldOptions = ko.mapping.defaultOptions().copy;
ko.mapping.defaultOptions().copy = ["alwaysCopyThis"];
~~~
**用法7：Specifying the update target**
在上面的例子，如果你想再一個class內map，你可以使用第三個參數作為操作的目標，例如：
~~~
ko.mapping.fromJS(data, {}, someObject); // overwrites properties on someObject
~~~
所以，如果你想map一個JavaScript對象到this上，你可以這樣聲明：
~~~
ko.mapping.fromJS(data, {}, this);
~~~
**從多數據源map**
你可以通過多次使用ko.mapping.fromJS 來將多個JS對象的數據源map到一起，例如：
~~~
var viewModel = ko.mapping.fromJS(alice, aliceMappingOptions);ko.mapping.fromJS(bob, bobMappingOptions, viewModel);
~~~
你聲明的mapping選項option在每次調用的時候都會合并。
**Map**以后的observable數組
map插件map以后生產的observable數組，帶有幾個額外的函數來處理帶有keys的mapping：
* mappedRemove
* mappedRemoveAll
* mappedDestroy
* mappedDestroyAll
* mappedIndexOf
?它們是和ko.observableArray里的函數等價的，不同是他們通過key來處理對象。例如：
~~~
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數組，除了上面的函數還支持一個mappedCreate函數：
~~~
var newItem = result.mappedCreate({ id: 3 });
~~~
首先會檢查key（id=3）在數組里是否存在（如果存在則拋出異常），然后，如果有create和 update回調的話會調用他們，最后創建一個新對象，并將新對象添加到數組然后返回該新對象。
**下載**
????[Version 2.0](https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output)?（最小版本8.6kb）
