KnockoutJS Documentation-加载和保存json数据
2015-11-27 13:22
447 查看
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
相关文章推荐
- [Javascript] variable, scope, scope chain, execution context
- js弹出框、对话框、提示框、弹窗总结
- JavaScript 本地对象、内置对象、宿主对象
- 看JavaScript设计模式这本书之后的收获(1)
- dcloud Native.js 调用第三方软件(UC打开网页)
- JavaScript 实现base64数据加密
- 精通 JS正则表达式(转)
- javascript:window.history.go(-1)
- JavaScript 函数参数设置默认值
- JavaScript SetInterval与setTimeout的区别
- Js 禁止手机页面拖拽
- 介绍一款js模版引擎handlebars
- jstl标签: c:Foreach详解
- js 方法重载
- js快速打印一个五分制(五颗星)的评分情况
- 剖析js对浮点数运算精度问题
- jsp回车键登录代码
- JSON表单提交(ajax异步刷新)
- Asp.net - Razor - 将Model中变量的值赋值给Javascript变量
- JavaScript 创建对象的几种方式?