http://www.cnblogs.com/w1991/p/4998707.html
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 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);
除了这种手动更新模型属性的方法,可以使用映射插件来减少代码量。
参考资料:
KnockoutJS Documentation