数据方法Knockoutjs实战开发：JSON数据的加载和保存(Loading and Saving JSON data)

题记：写这篇博客要主是加深自己对数据方法的认识和总结现实算法时的一些验经和训教，如果有错误请指出，万分感谢。

    Knockoutjs可以助帮我们现实庞杂的客户端交互，但是在很多的时候我们要需和我们的服务器行进数据交互或者至少将数据序列化到我们的地本存储器。此时我们就能够应用JSON式格数据行进数据的交互和保存了。

    一、加载和保存数据。

    Knockoutjs其实不强制要求我们应用某个体具的术技来行进数据的取读和保存，我们可以根据自己的要需应用不同的术技，我们经常应用的是JQuery的Ajax式方，比如：getJSON、post和ajax等，我们可以应用上面的方法从服务器获得数据：

1 $.getJSON("/some/url", function(data) {  
2     // Now use this data to update your view models,  
3     // and Knockout will update your UI automatically  
4 })

你也可以应用上面的方法向你的服务器发送数据：

1 var data = /* Your data in JSON format - see below */; 
2 $.post("/some/url", data, function(returnedData) { 
3     // This callback is executed if the post was successful      
4 })

如果你不想应用JQuery的话，你也可以应用其他的术技来获得和发送数据，无论如何，Knockoutjs可以助帮你做如下的两件事件：
（1）、保存数据：Knockoutjs可以将View Model中的数据保存到JSON中，这样你就能够应用响应的术技将数据传到服务器行进保存。

    （2）、加载数据：Knockoutjs将你取失掉的数据传送到对应的View Model，从而变改View Model层的数据，这样你的面页展示的数据也会随之变改了。

    二、将View Model数层据转换成JSON数据。

    我们的View Model是一个个的JavaScript对象，所以在某种意义上，我们可以应用JSON的序列化函数将此转换为JSON数据，比如：JSON.serialize()（当初有很多浏览器内嵌了此函数）和json2.js。但是，我们的View Model中可能含包observables、computed observables和observable arrays等，这些内容都是作为JavaScript方法行进译编的，此时应用以上的式方其实不能全完按照我们的意思把View Model转换为JSON数据。

    为了更加便利的将View Model的数据转换为JSON数据，Knockoutjs为我们供提了一些助帮：

    （1）、ko.toJS：克隆View Model对象的结构，以以后observable的值取代observable，因此我们仅仅失掉了一个View Model的备份，这个备份和Knockoutjs绑定并无关联。

    （2）、ko.toJSON：此方法将View Model的数据转换为JSON式格数据，其现实理原就是先通过ko.toJS失掉一份View Model的备份，然后通过浏览器地本的JSON序列化函数失掉JSON数据。（注：有的浏览器可能没有置内JSON的序列化函数，此时我们可以导入json2.js来行进应用）。

    例：定义以下的View Model。

 1 <script type="text/javascript">
 2      var viewModel = {
 3          firstName: ko.observable("Bert"),
 4          lastName: ko.observable("Smith"),
 5          pets: ko.observableArray(["Cat", "Dog", "Fish"]),
 6          type: "Customer"
 7      };
 8      viewModel.hasALotOfPets = ko.computed(function () {
 9          return this.pets().length > 2
10      }, viewModel);
11      ko.applyBindings(viewModel);
12 </script>

    每日一道理
翻开早已发黄的页张，试着寻找过去所留下的点点滴滴的足迹。多年前的好友似乎当初看来已变得陌生，匆忙之间，让这维持了多年的友谊变淡，找不出什么亲切感，只是偶尔遇上，淡淡地微笑，如今也只能在这发黄的页张中找寻过去的那些让人难忘的，至少我可以握住这仅剩下一段的“丝线头”……

此View Model中含包了observables、computed observables、observable arrays和plain values，此时我们可以应用ko.toJSON将其转换为JSON数据：

1 var jsonData = ko.toJSON(viewModel);
2 
3      // Result: jsonData is now a string equal to the following value 
4      // '{"firstName":"Bert","lastName":"Smith","pets":["Cat","Dog","Fish"],"type":"Customer","hasALotOfPets":true}'

或者你仅仅想失掉他的备份你可以应用：

 1 var plainJs = ko.toJS(viewModel); 
 2   
 3 // Result: plainJS is now a plain JavaScript object in which nothing is observable. It's just data. 
 4 // The object is equivalent to the following: 
 5 //   { 
 6 //      firstName: "Bert", 
 7 //      lastName: "Smith", 
 8 //      pets: ["Cat","Dog","Fish"], 
 9 //      type: "Customer", 
10 //      hasALotOfPets: true 
11 //   }

我们的ko.toJSON也可以接受和 JSON.stringify样同的参数，此时我们就能够像如下去应用ko.toJSON了：

1 <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

三、应用JSON数据来新更View Model的数据。
如果我们经已从服务段接受到了数据，并且想要用它来新更我们View Model层的数据，此时最直接的方法就是要我们自己去现实了：

1 // Load and parse the JSON 
2 var someJSON = /* Omitted: fetch it from the server however you want */; 
3 var parsed = JSON.parse(someJSON); 
4   
5 // Update view model properties 
6 viewModel.firstName(parsed.firstName); 
7 viewModel.pets(parsed.pets);

在很多的情况下，我们还是要饥寒交迫的，当我们新更完View Model的数据后之，Knockoutjs会主动的助帮我们新更UI层的展示。
然而，在很多情况下，很多的开发者可能会应用更为便利的方法来新更View Model层的数据，此时可能只要需编写一行码代对应View Model中的数据就部全新更了，这样就非常的便利，比如我们的View Model有很多的属性，或者嵌套了很多层，我们就能够应用此式方，可以大大少减我们的码代量，体具的方法我们在mapping plugin会体具的分析。

 

 

 

 

 

文章结束给大家分享下程序员的一些笑话语录： Google事件并不像国内主流媒体普遍误导的那样，它仅仅是中国Z府和美国公司、中国文化和美国文化甚至中国人和美国人之间的关系，是民族主义和帝国主义之间的关系；更重要的是，它就是Z府和公司之间的关系，是权力管制和市场自由之间的关系。从这个意义上说，过度管制下的受害者，主要是国内的企业。Google可以抽身而去，国内的企业只能祈望特区。www.ishuo.cn