6.Knockout.Js(加载或保存JSON数据)

前言

Knockout可以兑现很复杂的客户端交互,不过大致拥有的web应用程序都要和服务器端沟通数据(至少为了本地存储须要系列化数据),互换数据最有益的就是利用JSON格式
– 半数以上的Ajax应用程序也是行使那种格式。

加载或保存数据

Knockout不限定你用其余技术加载和保存数据。你可以应用此外技术和服务器来交互。用的最多的是选用jQuery的Ajax协助,例如:getJSON,post和ajax。你能够由此那个办法从劳动器端获取数据:

$.getJSON("/some/url", function (data) {
   ///可以使用Data来更新ViewModel,并且通过Ko来更新UI元素 
};

依旧向服务器端发送数据:

var data = {} ;   /////JSON数据格式的data
$.post("/some/url", data, function(returnedData) {
    ////如果向服务端发送数据成功,那么此回调函数就会被执行
})

抑或,假如您不想用jQuery,你可以用别的其余的不二法门来读取或保存JSON数据。所以,Knockout必要你做的仅仅是:

    对于保留,让您的view
model数据转换到不难的JSON格式,以方便使用上边的技能来保存数据。

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

转化ViewModel数据到JSON格式

是因为view
model都是JavaScript对象,所以你要求利用标准的JSON体系化工具让转账view
model为JSON格式。例如,可以利用JSON.serialize()(新本子浏览器才支撑的原生方法),只怕使用json2.js类库。但是你的view
model或许包蕴observables,器重对象dependent
observables和observable数组,有只怕不可以很好的种类化,你须求协调额外的拍卖一下多少。

为了使view
model数据连串化方便(包涵系列化observables等格式),Knockout提供了3个帮扶函数:

  1.ko.toJS — 克隆你的view model对象,并且替换全体的observable
对象为当下的值,那样您可以博得1个干净的和Knockout无关的数据copy。

  2.ko.toJSON — 将view model对象转化成JSON字符串。原理就是:先调在view
model上调用ko.toJS,然后调用浏览器原生的JSON
连串化器拿到结果。注:一些老浏览器版本不支持原生的JSON
体系化器(例如:IE7和在此之前的版本),你须求引用json2.js类库。

声惠氏个view model:

Ajax 1

<script type="text/javascript">
    var viewModel = {
        firstName: ko.observable("Aehyok"),
        lastName: ko.observable("Leo"),
        pets: ko.observableArray(["Dog", "Cat", "Fish"]),
        Type:"Customer"
    };

    view.hasALotOfPets = ko.dependentObservable(function () {
        return this.pets().length() > 2;
    }, viewModel);
    ko.applyBindings(viewModel);
</script>

Ajax 2

Ajax,该view model包蕴observable类型的值,信赖类型的值dependent
observable以及借助数组observable
array,和日常对象。你可以像如下代码一样拔取ko.toJSON将此转化成服务器端使用的JSON
字符串:

    var jsonData = ko.toJSON(viewModel);
    alert(jsonData);

返回的JSON数据为

Ajax 3

抑或,连串化此前,你想赢得JavaScript简单对象的话,直接使用像这样同样采纳ko.toJS:

var plainJs = ko.toJS(viewModel);

返回的JavaScript对象为

Ajax 4

使用JSON更新ViewModel数据

比方您从服务器端获取数据并且更新到view
model上,最简便易行的点子是上下一心完毕。例如

    var someJSON = '{ "firstName": "Aehyok1","lastName": "Leo1"}';
    var parsed = JSON.parse(someJSON);
    debugger;
    viewModel.firstName(parsed.firstName);

先看前边的值

Ajax 5

推行之后

Ajax 6

不少情形下,最直白的格局就是最简便易行而且最灵敏的方法。当然,即使您更新了view
model的天性,Knockout会自动帮你更新相关的UI成分的。

唯独,很多开发职员如故喜欢使用一种好用而不是每趟都写代码的艺术来转化数据到view
model上,尤其是view
model有无数性质可能嵌套的数据结构的时候,那很有用,因为可以省去很多代码量。knockout.mapping插件可以帮你成功那点。

相关文章