6.knockout.js (load or save JSON data)

Objective

Knockout can achieve very complex client interactions, but almost all Web applications have to exchange data with the server (at least for local storage needs to serialize the data), the most convenient way to exchange data is to use the JSON format – most AJAX applications also use this format.

Load or save data

Knockout does not restrict you from loading and saving data with any technology. You can use any technology and server to interact. The most used Ajax help with jquery, for example: Getjson,post and Ajax. You can get data from the server side using these methods:

$.getjson ("/some/url", function (data) {/////    can use data to update ViewModel and update UI elements through KO);  

or send data to the server side:

var data = {};   /////json Data Format data$.post("/some/url"//////////////////////////////)   

Or, if you don't want to use jquery, you can read or save JSON data in any other way. So, what knockout need you to do is simply:

For saving, let your view model data be converted into a simple JSON format to facilitate the use of the above techniques to save data.

For loading, update the data you receive to your view model.

Convert ViewModel data to JSON format

Because the view model is a JavaScript object, you need to use the standard JSON serialization tool to make the conversion view model JSON format. For example, you can use the Json.serialize () (native method supported by the new version browser), or use the Json2.js class library. However, your view model may include observables, dependent objects dependent observables and observable arrays, which may not be well serialized, and you need to deal with the data yourself.

For easy serialization of the view model data (including formats such as serialization observables), Knockout provides 2 helper functions:

1.ko.tojs-clones your view model object and replaces all of the observable objects with the current values, so you can get a clean and knockout-independent copy of the data.

2.ko.tojson-converts the view model object into a JSON string. The principle is: first tune the KO.TOJS on the view model and then invoke the native JSON serializer of the browser to get the results. Note: Some old browser versions do not support native JSON serializers (for example: IE7 and previous versions) and you need to refer to the Json2.js class library.

Declare a view model:

<script type="Text/javascript">var ViewModel ={firstName:ko.observable ("Aehyok"), LastName:ko.observable ("Leo" " dog" cat" fish ""), Type: customer< Span style= "color: #800000;" > "}; View.hasalotofpets = Ko.dependentobservable (function () { return this.pets (). Length () > 2         

The view model contains the value of the observable type, the value of the dependent type dependent observable and the dependent array observable array, and the normal object. You can use Ko.tojson to convert this to a JSON string used on the server side, as in the following code:

    var jsondata = Ko.tojson (viewModel);    alert (jsondata);

The JSON data returned is

Or, before serializing, you want a JavaScript simple object, use Ko.tojs just like this:

var plainjs = Ko.tojs (ViewModel);

The returned JavaScript object is

Updating ViewModel data with JSON

If you get the data from the server side and update to the view model, the simplest way is to implement it yourself. For example

    '{' firstName ': ' Aehyok1 ', ' lastName ': ' Leo1 '}';    var parsed = Json.parse (somejson); debugger; Viewmodel.firstname (parsed.firstname);    

First look at the previous value

After execution

In many cases, the most straightforward approach is the simplest and most flexible way. Of course, if you update the properties of the view model, knockout will automatically help you update the relevant UI elements.

However, many developers prefer to use a handy instead of writing code every time to convert the data to the view model, especially when the view model has a lot of properties or nested data structures, this is useful, because it can save a lot of code. The Knockout.mapping plugin can help you do this.

6.knockout.js (load or save JSON data)