KnockoutJS 3.X API 第七章 其餘技術(1) 加載和保存JSON數據

Knockout容許您實現複雜的客戶端交互性，但幾乎全部Web應用程序還須要與服務器交換數據，或至少將本地存儲的數據序列化。 最方便的交換或存儲數據的方式是JSON格式 - 大多數Ajax應用程序今天使用的格式。

加載或保存數據

Knockout不強制您使用任何一種特殊技術來加載或保存數據。 您可使用任何適合您所選擇的服務器端技術的機制。 最經常使用的機制是jQuery的Ajax方法，例如getJSON，post和ajax。 您能夠從服務器獲取數據：

$.getJSON("/some/url", function(data) { 
    // Now use this data to update your view models, 
    // and Knockout will update your UI automatically 
})

或者您能夠向服務器發送數據：

var data = /* Your data in JSON format - see below */;
$.post("/some/url", data, function(returnedData) {
    // This callback is executed if the post was successful     
})

或者，若是您不想使用jQuery，則可使用任何其餘機制來加載或保存JSON數據。 因此，全部Knockout須要幫助你作的是：

• 要保存，請將您的視圖模型數據轉換爲簡單的JSON格式，以即可以使用上述其中一種技術發送它
• 要加載，請使用您經過上述其中一種方法收到的數據更新視圖模型

將視圖模型數據轉換爲純JSON

您的視圖模型是JavaScript對象，所以在某種意義上，您可使用任何標準JSON序列化程序（例如JSON.stringify（現代瀏覽器中的本地函數）或json2.js library）將它們序列化爲JSON。 可是，您的視圖模型可能包含observables，computed observables和observable數組，這些數組實現爲JavaScript函數，所以不會在不執行額外工做的狀況下徹底序列化。

爲了便於序列化視圖模型數據，包括observables等，Knockout包括兩個幫助函數：

• ko.toJS — 這克隆了你的視圖模型的對象圖，用每一個observable替換了observable的當前值，因此你獲得一個只包含你的數據和沒有Knockout相關的工件
• ko.toJSON — 這將生成一個JSON字符串，表示您的視圖模型的數據。 在內部，它簡單地在您的視圖模型上調用ko.toJS，而後在結果上使用瀏覽器的原生JSON序列化程序。 注意：爲了在沒有本地JSON序列化器（例如，IE 7或更早版本）的舊版瀏覽器上工做，還必須引用json2.js庫。

例如，定義視圖模型以下：

var viewModel = {
    firstName : ko.observable("Bert"),
    lastName : ko.observable("Smith"),
    pets : ko.observableArray(["Cat", "Dog", "Fish"]),
    type : "Customer"
};
viewModel.hasALotOfPets = ko.computed(function() {
    return this.pets().length > 2
}, viewModel)

它包含可觀察量，計算可觀察量，可觀察數組和平均值的混合。 您能夠將其轉換爲適用於使用ko.toJSON發送到服務器的JSON字符串，以下所示：

ar jsonData = ko.toJSON(viewModel);
 
// Result: jsonData is now a string equal to the following value
// '{"firstName":"Bert","lastName":"Smith","pets":["Cat","Dog","Fish"],"type":"Customer","hasALotOfPets":true}'

或者，若是您只想在序列化以前使用純JavaScript對象圖，請使用ko.toJS以下：

var plainJs = ko.toJS(viewModel);
 
// Result: plainJS is now a plain JavaScript object in which nothing is observable. It's just data.
// The object is equivalent to the following:
//   {
//      firstName: "Bert",
//      lastName: "Smith",
//      pets: ["Cat","Dog","Fish"],
//      type: "Customer",
//      hasALotOfPets: true
//   }

注意，ko.toJSON接受與JSON.stringify相同的參數。 例如，在調試Knockout應用程序時，對視圖模型數據進行「實時」表示是很是有用的。 要爲此目的生成格式良好的顯示，能夠將空格參數傳遞給ko.toJSON並綁定到視圖模型，如：

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

使用JSON更新視圖模型數據

若是您從服務器加載了一些數據，並但願使用它來更新您的視圖模型，最直接的方法是：

// Load and parse the JSON
var someJSON = /* Omitted: fetch it from the server however you want */;
var parsed = JSON.parse(someJSON);
 
// Update view model properties
viewModel.firstName(parsed.firstName);
viewModel.pets(parsed.pets);

在許多狀況下，這種直接方法是最簡單和最靈活的解決方案。 固然，當您更新視圖模型上的屬性時，Knockout將會更新可見的UI來匹配它。

然而，許多開發人員更喜歡使用更多的基於約定的方法來使用傳入數據更新他們的視圖模型，而不須要爲每一個要更新的屬性手動編寫一行代碼。 若是您的視圖模型具備許多屬性或深層嵌套的數據結構，這多是有益的，由於它能夠大大減小您須要編寫的手動映射代碼的數量。 有關此技術的更多詳細信息，請參閱之後章節的knockout.mapping插件。