Knockout旨在允許您將任意JavaScript對象用作視圖模型。 只要一些視圖模型的屬性是observables，您可以使用KO將它們綁定到您的UI，并且UI將在可觀察屬性更改時自動更新。

大多數(shù)應(yīng)用程序需要從后端服務(wù)器獲取數(shù)據(jù)。 由于服務(wù)器沒有任何可觀察的概念，它只提供一個純JavaScript對象（通常序列化為JSON）。 映射插件提供了一種簡單的方法來將該簡單的JavaScript對象映射到具有適當?shù)膐bservables的視圖模型中。 這是替代手動編寫自己的JavaScript代碼，根據(jù)您從服務(wù)器獲取的一些數(shù)據(jù)構(gòu)建視圖模型。

下載映射插件(你需要翻個墻)

• Version 2.0 (8.6kb minified)，

示例：不帶ko.mapping插件的手動映射

您要顯示當前服務(wù)器時間和您的網(wǎng)頁上的用戶數(shù)。 您可以使用以下視圖模型表示此信息：

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

您可以將此視圖模型綁定到一些HTML元素，如下所示：

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

由于視圖模型屬性是可觀察的，KO將在這些屬性更改時自動更新HTML元素。

接下來，您要從服務(wù)器獲取最新數(shù)據(jù)。 每5秒您可以發(fā)出一個Ajax請求（例如，使用jQuery的$ .getJSON或$ .ajax函數(shù)）：

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

服務(wù)器可能返回類似于以下內(nèi)容的JSON數(shù)據(jù)：

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

最后，要使用此數(shù)據(jù)更新視圖模型（不使用映射插件），您應(yīng)該寫：

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

你必須為你想在頁面上顯示的每個變量這樣做。 如果您的數(shù)據(jù)結(jié)構(gòu)變得更加復(fù)雜（例如，它們包含子節(jié)點或包含數(shù)組），則手動處理變得非常麻煩。 映射插件允許您做的是創(chuàng)建從常規(guī)JavaScript對象（或JSON結(jié)構(gòu)）到可觀察視圖模型的映射。

示例：使用ko.mapping

要通過映射插件創(chuàng)建視圖模型，請將上面代碼中的viewModel的創(chuàng)建替換為ko.mapping.fromJS函數(shù)：

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

如何映射

• 對象的所有屬性都將轉(zhuǎn)換為observable。 如果更新將更改值，它將更新observable。
• 數(shù)組被轉(zhuǎn)換為可觀察數(shù)組。 如果更新會更改項目數(shù)，則它將執(zhí)行適當?shù)奶砑?刪除操作。 它還將嘗試保持與原始JavaScript數(shù)組相同的順序。

取消映射

如果要將映射對象轉(zhuǎn)換回常規(guī)JS對象，請使用：

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

這將創(chuàng)建一個未映射的對象，只包含作為原始JS對象的一部分的映射對象的屬性。 因此，換句話說，您手動添加到視圖模型的任何屬性或函數(shù)都將被忽略。 默認情況下，此規(guī)則的唯一例外是_destroy屬性，它也將被映射回來，因為它是Knockout在從ko.observableArray中銷毀項目時可能生成的屬性。 有關(guān)如何配置此項的更多詳細信息，請參閱“高級應(yīng)用”章節(jié)。

使用JSON字符串

如果您的Ajax調(diào)用返回一個JSON字符串（并且不將其反序列化為JavaScript對象），那么您可以使用函數(shù)ko.mapping.fromJSON來創(chuàng)建和更新視圖模型。 要取消映射，可以使用ko.mapping.toJSON。

除了它們使用JSON字符串而不是JS對象的事實，這些函數(shù)與它們的JS對象完全相同。

高級用法

有時，可能有必要對如何執(zhí)行映射有更多的控制。 這是使用映射選項實現(xiàn)的。 它們可以在ko.mapping.fromJS調(diào)用期間指定。 在后續(xù)調(diào)用中，您不需要再次指定它們。

在這種情況下，您可能需要使用這些映射選項。

使用“key”唯一標識對象

假設(shè)您有一個類似于以下內(nèi)容的JavaScript對象：

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

您可以將此映射到視圖模型沒有任何問題：

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

現(xiàn)在，假設(shè)數(shù)據(jù)更新為沒有任何拼寫錯誤：

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

這里發(fā)生了兩件事情：name從Scot改為Scott，children[0] .name從Alicw變成了Alice。 您可以基于此新數(shù)據(jù)更新viewModel：

ko.mapping.fromJS(data, viewModel);

和名稱會改變，如預(yù)期。 但是，在children數(shù)組中，子（Alicw）將被完全刪除，并添加一個新的（Alice）。 這不是完全你會期望的。 相反，你會希望只有孩子的name屬性從Alicw更新到Alice，而不是整個孩子被替換！

這是因為，默認情況下，映射插件只是比較數(shù)組中的兩個對象。 因為在JavaScript中，對象{id：1，name：'Alicw'}不等于{id：1，name：'Alice'}，它認為整個孩子需要被刪除并被一個新的替換。

要解決這個問題，你可以指定映射插件應(yīng)該使用哪個鍵來確定對象是新的還是舊的。 你可以這樣設(shè)置：

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

這樣，每次映射插件檢查children數(shù)組中的一個項目時，它只會查看id屬性來確定一個對象是否被完全替換或只是需要更新。

使用“create”定制對象構(gòu)造

如果你想自己處理映射的一部分，你也可以提供一個create回調(diào)。 如果這個回調(diào)存在，映射插件將允許你自己做這部分的映射。

假設(shè)您有一個類似于以下內(nèi)容的JavaScript對象：

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

如果你想自己映射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ù)是一個JavaScript對象，其中包含：

• data: 包含此子項的數(shù)據(jù)的JavaScript對象
• parent: 此子項所屬的父對象或數(shù)組

當然，在創(chuàng)建回調(diào)中你可以做另一個調(diào)用ko.mapping.fromJS如果你愿意。 一個典型的用例可能是，如果你想用一些額外的計算observables擴充原始的JavaScript對象：

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

使用“update”定制對象更新

您還可以通過指定更新回調(diào)來自定義對象的更新方式。 它將接收它試圖更新的對象和一個與create回調(diào)所使用的相同的選項對象。 您應(yīng)該返回更新的值。

提供給更新回調(diào)的options參數(shù)是一個JavaScript對象，包含：* data：包含此子節(jié)點數(shù)據(jù)的JavaScript對象* parent：此子節(jié)點所屬的父對象或數(shù)組* observable：如果屬性是可觀察的 將被設(shè)置為實際可觀察的

下面是一個配置示例，將在更新之前向輸入數(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());

這將彈窗提示Graham Foo！

使用“ignore”忽略某些屬性

如果你想映射插件忽略你的JS對象的一些屬性（即不映射它們），你可以指定一個屬性名稱數(shù)組來忽略：

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

您在映射選項中指定的忽略數(shù)組與默認忽略數(shù)組相結(jié)合。 你可以像這樣操作這個默認數(shù)組：

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

使用“include”包括某些屬性

當將視圖模型轉(zhuǎn)換回JS對象時，默認情況下，映射插件將僅包含屬于原始視圖模型的屬性，但它也將包括Knockout生成的_destroy屬性，即使它不是原始對象的一部分 。 但是，您可以選擇自定義此數(shù)組：

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

您在映射選項中指定的include數(shù)組與默認的include數(shù)組相結(jié)合，默認情況下只包含_destroy。 你可以像這樣操作這個默認數(shù)組：

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

使用“copy”復(fù)制某些屬性

將視圖模型轉(zhuǎn)換回JS對象時，默認情況下，映射插件將根據(jù)上述規(guī)則創(chuàng)建可觀察項。 如果你想強制映射插件簡單地復(fù)制屬性而不是使其可見，添加其名稱到“復(fù)制”數(shù)組：

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

您在映射選項中指定的副本數(shù)組與默認副本數(shù)組相結(jié)合，默認情況下為空。 你可以像這樣操作這個默認數(shù)組：

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

僅使用“observe”觀察某些屬性

如果你希望映射插件只創(chuàng)建你的JS對象的一些屬性的可觀察和復(fù)制，你可以指定一個屬性名稱數(shù)組觀察：

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

您在映射選項中指定的觀察數(shù)組與默認的觀察數(shù)組相結(jié)合，默認情況下為空。 你可以像這樣操作這個默認數(shù)組：

var oldOptions = ko.mapping.defaultOptions().observe;
ko.mapping.defaultOptions().observe = ["onlyObserveThis"];

數(shù)組忽略并包括仍然正常工作。 數(shù)組副本可用于復(fù)制數(shù)組或?qū)ο髮傩裕òㄗ釉兀┑男省?如果在copy或observe中沒有指定數(shù)組或?qū)ο髮傩裕敲此鼘⒈贿f歸映射：

var data = {
    a: "a",
    b: [{ b1: "v1" }, { b2: "v2" }] 
};
 
var result = ko.mapping.fromJS(data, { observe: "a" });
var result2 = ko.mapping.fromJS(data, { observe: "a", copy: "b" }); //will be faster to map.

結(jié)果和結(jié)果2將是：

{
    a: observable("a"),
    b: [{ b1: "v1" }, { b2: "v2" }] 
}

復(fù)制和觀察可以沖突：

var data = {
    a: "a",
    b: [{ b1: "v1" }, { b2: "v2" }] 
};
var result = ko.mapping.fromJS(data, { observe: "b[0].b1"});
var result2 = ko.mapping.fromJS(data, { observe: "b[0].b1", copy: "b" });

結(jié)果將是：

{
    a: "a",
    b: [{ b1: observable("v1") }, { b2: "v2" }] 
}

結(jié)果2將是：

{
    a: "a",
    b: [{ b1: "v1" }, { b2: "v2" }] 
}

指定更新目標

如果，像在上面的例子中，你正在一個類中執(zhí)行映射，你希望有它作為你的映射操作的目標。 ko.mapping.fromJS的第三個參數(shù)指示目標。 例如，

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

所以，如果你想映射一個JavaScript對象到這里，你可以傳遞這個作為第三個參數(shù)：

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

從多個來源映射

您可以通過應(yīng)用多個ko.mapping.fromJS調(diào)用在一個視圖模型中組合多個JS對象，例如：

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

在每個調(diào)用中指定的映射選項將被合并。

映射監(jiān)控屬性數(shù)組

由映射插件生成的可觀察數(shù)組通過一些可以利用鍵映射的函數(shù)來擴充：

• mappedRemove
• mappedRemoveAll
• mappedDestroy
• mappedDestroyAll
• mappedIndexOf

它們在功能上等同于常規(guī)的ko.observableArray函數(shù)，但是可以基于對象的鍵來做事情。 例如：

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 });

映射的observablearray還公開了一個映射的Create函數(shù)：

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

它將首先檢查鍵是否已經(jīng)存在，如果是，將拋出異常。 接下來，它將調(diào)用create和update回調(diào)（如果有的話）來創(chuàng)建新對象。 最后，它將把這個對象添加到數(shù)組并返回它。

KnockoutJS 3.X 結(jié)語

至此，所有KnockoutJS 3.X的API文檔撰寫完畢，希望這個完整的KnockoutJS中文文檔能對你有所幫助，感謝你的閱讀。如果你覺得不錯，請點一波推薦，關(guān)注。如果你覺得文中有那些不妥，歡迎批評指正。

感謝您的閱讀。

轉(zhuǎn)載請注明出處：http://www.rzrgm.cn/smallprogram/ 

再次感謝