第六章：加載或保存JSON數(shù)據(jù)

加載或保存JSON數(shù)據(jù)

Knockout可以實(shí)現(xiàn)很復(fù)雜的客戶端交互，但是幾乎所有的web應(yīng)用程序都要和服務(wù)器端交換數(shù)據(jù)（至少為了本地存儲(chǔ)需要序列化數(shù)據(jù)），交換數(shù)據(jù)最方便的就是使用JSON格式?– 大多數(shù)的Ajax應(yīng)用程序也是使用這種格式。

加載或保存數(shù)據(jù)

Knockout不限制你用任何技術(shù)加載和保存數(shù)據(jù)。你可以使用任何技術(shù)和服務(wù)器來(lái)交互。用的最多的是使用jQuery的Ajax幫助，例如：getJSON，post和ajax。你可以通過(guò)這些方法從服務(wù)器端獲取數(shù)據(jù)：

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

… 或者向服務(wù)器端發(fā)送數(shù)據(jù)：

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，你可以用任何其它的方式來(lái)讀取或保存JSON數(shù)據(jù)。所以， Knockout需要你做的僅僅是：

??? 對(duì)于保存，讓你的view model數(shù)據(jù)轉(zhuǎn)換成簡(jiǎn)單的JSON格式，以方便使用上面的技術(shù)來(lái)保存數(shù)據(jù)。

??? 對(duì)于加載，更新你接收到的數(shù)據(jù)到你的view model上。

轉(zhuǎn)化View Model數(shù)據(jù)到JSON格式

由于view model都是JavaScript對(duì)象，所以你需要使用標(biāo)準(zhǔn)的JSON序列化工具讓轉(zhuǎn)化view model為JSON格式。例如，可以使用JSON.serialize()（新版本瀏覽器才支持的原生方法），或者使用json2.js類庫(kù)。不過(guò)你的view model可能包括observables，依賴對(duì)象dependent observables和observable數(shù)組，有可能不能很好的序列化，你需要自己額外的處理一下數(shù)據(jù)。

為了使view model數(shù)據(jù)序列化方便（包括序列化observables等格式），Knockout提供了2個(gè)幫助函數(shù)：

• ko.toJS — 克隆你的view model對(duì)象，并且替換所有的observable 對(duì)象為當(dāng)前的值，這樣你可以得到一個(gè)干凈的和Knockout無(wú)關(guān)的數(shù)據(jù)copy。
• ko.toJSON — 將view model對(duì)象轉(zhuǎn)化成JSON字符串。原理就是：先調(diào)在view model上調(diào)用ko.toJS，然后調(diào)用瀏覽器原生的JSON 序列化器得到結(jié)果。注：一些老瀏覽器版本不支持原生的JSON 序列化器（例如：IE7和以前的版本），你需要引用json2.js類庫(kù)。

聲明一個(gè)view model：

var viewModel = {
    firstName: ko.observable("Bert"),
    lastName: ko.observable("Smith"),
    pets: ko.observableArray(["Cat", "Dog", "Fish"]),
    type: "Customer"
};

viewModel.hasALotOfPets = ko.dependentObservable(function () {
    return this.pets().length > 2
}, viewModel)

該view model包含observable類型的值，依賴類型的值dependent observable以及依賴數(shù)組observable array，和普通對(duì)象。你可以像如下代碼一樣使用ko.toJSON將此轉(zhuǎn)化成服務(wù)器端使用的JSON 字符串：

var 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簡(jiǎn)單對(duì)象的話，直接使用像這樣一樣使用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
//   }

使用JSON更新View Model數(shù)據(jù)

如果你從服務(wù)器端獲取數(shù)據(jù)并且更新到view model上，最簡(jiǎn)單的方式是自己實(shí)現(xiàn)。例如，

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

很多情況下，最直接的方法就是最簡(jiǎn)單而且最靈活的方式。當(dāng)然，如果你更新了view model的屬性，Knockout會(huì)自動(dòng)幫你更新相關(guān)的UI元素的。

不過(guò)，很多開(kāi)發(fā)人員還是喜歡使用一種好用而不是每次都寫(xiě)代碼的方式來(lái)轉(zhuǎn)化數(shù)據(jù)到view model上，尤其是view model有很多屬性或者嵌套的數(shù)據(jù)結(jié)構(gòu)的時(shí)候，這很有用，因?yàn)榭梢怨?jié)約很多代碼量。knockout.mapping插件可以幫你做到這一點(diǎn)。