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提供了2单援助函数:

  1.ko.toJS — 仿制你的view model对象,并且替换所有的observable
对象也当下的价值,这样你可以落一个清之同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

该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前面的价值

Ajax 5

推行后

Ajax 6

过剩情景下,最直接的措施就是是最为简便而太灵的不二法门。当然,如果您更新了view
model的性质,Knockout会自动帮助你更新相关的UI元素的。

然,很多开发人员还是好下同样栽好用要休是历次都写代码的措施来转化数据到view
model上,尤其是view
model有那么些性或者嵌套的数据结构的时光,这特别有因此,因为好节约很多代码量。knockout.mapping插件可以帮忙您完了及时一点。

相关文章