Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how Knockout loads or saves JSON data". In daily operation, I believe many people have doubts about how Knockout loads or saves JSON data. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how Knockout loads or saves JSON data". Next, please follow the editor to study!

Knockout can implement complex client-side interactions, but almost all web applications exchange data with the server (at least serialized data for local storage), and the most convenient way to exchange data is in JSON format, which is also used by most Ajax applications.

Load or save data

Knockout does not restrict you to load and save data using any technology. You can use any technology to interact with the server. The most frequently used is jQuery's Ajax help, such as getJSON,post and ajax. You can use these methods to get data from the server:

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

... Or send data to the server:

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

Or, if you don't want to use jQuery, you can read or save JSON data in any other way. So, all Knockout needs you to do is:

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

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

Convert View Model data to JSON format

Since view model are JavaScript objects, you need to use standard JSON serialization tools to convert view model to JSON format. For example, you can use JSON.serialize () (a native method supported by newer browsers), or you can use the json2.js class library. However, your view model may include observables, dependent objects dependent observables and observable arrays, and may not be well serialized, so you need to do some extra processing of the data yourself.

To facilitate serialization of view model data (including serialization of observables and other formats), Knockout provides two helper functions:

◆ ko.toJS-Clone your view model objects and replace all observable objects with their current values, so you can get a clean copy that has nothing to do with Knockout.

◆ ko.toJSON-converts a view model object to a JSON string. The principle is: first call ko.toJS on view model, and then call the browser's native JSON serializer to get the result. Note: some older browser versions do not support native JSON serializers (for example: IE7 and previous versions), you need to refer to the json2.js class library.

Declare a 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)

The view model contains the value of type observable, the value of dependency type dependent observable, and the dependency array observable array, and normal objects. You can use ko.toJSON to convert this into a JSON string used on the server side as shown in the following code:

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}'

Or, if you want to get a JavaScript simple object before serialization, just use ko.toJS like this:

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 / /}

Update View Model data using JSON

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

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

In many cases, the most direct way is the simplest and most flexible way. Of course, if you update the properties of view model, Knockout will automatically update the relevant UI elements for you.

At this point, the study on "how Knockout loads or saves JSON data" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.