KnockoutJS Documentation-加载和保存json数据

ko可用来构建复杂的客户端交互应用，但几乎所有的web应用都需要跟服务器交互数据，或者至少从本地存储序列化数据。最常用的数据交互是json格式。

加载或保存数据

ko不限定使用任何数据加载或保存的技术。最常用是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也可以用其它的方式加载和保存数据。ko要做的就是：

• 保存时，将视图模型数据转换成简单的json格式。
• 加载时，用接收的数据更新到视图模型。

将视图模型数据转换成普通json

视图模型是js对象，因此可以用JSON.stringify（浏览器内置方法）或json2.js库将其序列化为json。但是视图模型中可能包含监控属性、计算监控属性、和监控数组，这些实际上是js函数，在序列化时不希望做一些额外的工作来清理。

ko提供了两个辅助方法：

• ko.toJS：复制视图模型对象，将监控属性替换其值，这样可以获取一个包含数据且与ko无关的普通的副本对象。
• ko.toJSON：将视图模型数据转换成json字符串。其内部实现是，先对视图模型调用ko.ToJS，再对结果调用浏览器的本地序列化方法。对于IE7及更早的版本没有json序列化方法，就需要引用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)

将其转换成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}'

也可以得到序列化前的普通js对象：

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一样的。例如传递一些额外的参数：

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

使用json更新视图模型

如果从服务器更新了数据并希望更新到视图模型上，最直接的方法是对需要的属性赋值：

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

除了这种手动更新模型属性的方法，可以使用映射插件来减少代码量。

参考资料：
KnockoutJS Documentation