這篇文章主要介紹“Knockout怎么加載或保存JSON數(shù)據(jù)”，在日常操作中，相信很多人在Knockout怎么加載或保存JSON數(shù)據(jù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Knockout怎么加載或保存JSON數(shù)據(jù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為長清等服務(wù)建站，長清等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為長清企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Knockout可以實現(xiàn)很復(fù)雜的客戶端交互，但是幾乎所有的web應(yīng)用程序都要和服務(wù)器端交換數(shù)據(jù)(至少為了本地存儲需要序列化數(shù)據(jù))，交換數(shù)據(jù)最方便的就是使用JSON格式 – 大多數(shù)的Ajax應(yīng)用程序也是使用這種格式。

加載或保存數(shù)據(jù)

Knockout不限制你用任何技術(shù)加載和保存數(shù)據(jù)。你可以使用任何技術(shù)和服務(wù)器來交互。用的最多的是使用jQuery的Ajax幫助，例如：getJSON，post和ajax。你可以通過這些方法從服務(wù)器端獲取數(shù)據(jù)：

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

… 或者向服務(wù)器端發(fā)送數(shù)據(jù)：

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

或者，如果你不想用jQuery，你可以用任何其它的方式來讀取或保存JSON數(shù)據(jù)。所以， Knockout需要你做的僅僅是：

對于保存，讓你的view model數(shù)據(jù)轉(zhuǎn)換成簡單的JSON格式，以方便使用上面的技術(shù)來保存數(shù)據(jù)。

對于加載，更新你接收到的數(shù)據(jù)到你的view model上。

轉(zhuǎn)化View Model數(shù)據(jù)到JSON格式

由于view model都是JavaScript對象，所以你需要使用標準的JSON序列化工具讓轉(zhuǎn)化view model為JSON格式。例如，可以使用JSON.serialize()(新版本瀏覽器才支持的原生方法)，或者使用json2.js類庫。不過你的view model可能包括observables，依賴對象dependent observables和observable數(shù)組，有可能不能很好的序列化，你需要自己額外的處理一下數(shù)據(jù)。

為了使view model數(shù)據(jù)序列化方便(包括序列化observables等格式)，Knockout提供了2個幫助函數(shù)：

◆ ko.toJS — 克隆你的view model對象，并且替換所有的observable 對象為當(dāng)前的值，這樣你可以得到一個干凈的和Knockout無關(guān)的數(shù)據(jù)copy。

◆ ko.toJSON — 將view model對象轉(zhuǎn)化成JSON字符串。原理就是：先調(diào)在view model上調(diào)用ko.toJS，然后調(diào)用瀏覽器原生的JSON 序列化器得到結(jié)果。注：一些老瀏覽器版本不支持原生的JSON 序列化器(例如：IE7和以前的版本)，你需要引用json2.js類庫。

聲明一個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)

該view model包含observable類型的值，依賴類型的值dependent observable以及依賴數(shù)組observable array，和普通對象。你可以像如下代碼一樣使用ko.toJSON將此轉(zhuǎn)化成服務(wù)器端使用的JSON 字符串：

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

或者，序列化之前，你想得到JavaScript簡單對象的話，直接使用像這樣一樣使用ko.toJS：

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

使用JSON更新View Model數(shù)據(jù)

如果你從服務(wù)器端獲取數(shù)據(jù)并且更新到view model上，最簡單的方式是自己實現(xiàn)。例如，

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

很多情況下，最直接的方法就是最簡單而且最靈活的方式。當(dāng)然，如果你更新了view model的屬性，Knockout會自動幫你更新相關(guān)的UI元素的。

到此，關(guān)于“Knockout怎么加載或保存JSON數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文標題：Knockout怎么加載或保存JSON數(shù)據(jù)
文章源于：http://www.rwnh.cn/article30/jgpspo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、域名注冊、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)