温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Knockout怎么加载或保存JSON数据

发布时间:2021-11-18 13:46:37 来源:亿速云 阅读:167 作者:iii 栏目:web开发

这篇文章主要介绍“Knockout怎么加载或保存JSON数据”,在日常操作中,相信很多人在Knockout怎么加载或保存JSON数据问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Knockout怎么加载或保存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需要你做的仅仅是:

对于保存,让你的view model数据转换成简单的JSON格式,以方便使用上面的技术来保存数据。

对于加载,更新你接收到的数据到你的view model上。

转化View Model数据到JSON格式

由于view model都是JavaScript对象,所以你需要使用标准的JSON序列化工具让转化view model为JSON格式。例如,可以使用JSON.serialize()(新版本浏览器才支持的原生方法),或者使用json2.js类库。不过你的view model可能包括observables,依赖对象dependent observables和observable数组,有可能不能很好的序列化,你需要自己额外的处理一下数据。

为了使view model数据序列化方便(包括序列化observables等格式),Knockout提供了2个帮助函数:

◆ ko.toJS — 克隆你的view model对象,并且替换所有的observable 对象为当前的值,这样你可以得到一个干净的和Knockout无关的数据copy。

◆ ko.toJSON — 将view model对象转化成JSON字符串。原理就是:先调在view model上调用ko.toJS,然后调用浏览器原生的JSON 序列化器得到结果。注:一些老浏览器版本不支持原生的JSON 序列化器(例如:IE7和以前的版本),你需要引用json2.js类库。

声明一个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以及依赖数组observable array,和普通对象。你可以像如下代码一样使用ko.toJSON将此转化成服务器端使用的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简单对象的话,直接使用像这样一样使用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数据

如果你从服务器端获取数据并且更新到view model上,最简单的方式是自己实现。例如,

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

很多情况下,最直接的方法就是最简单而且最灵活的方式。当然,如果你更新了view model的属性,Knockout会自动帮你更新相关的UI元素的。

到此,关于“Knockout怎么加载或保存JSON数据”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI