KnockoutJS 3.X API 第七章 其他技術(1) 載入和保存JSON數據

来源:http://www.cnblogs.com/smallprogram/archive/2016/10/19/5976133.html
-Advertisement-
Play Games

Knockout允許您實現複雜的客戶端交互性,但幾乎所有Web應用程式還需要與伺服器交換數據,或至少將本地存儲的數據序列化。 最方便的交換或存儲數據的方式是JSON格式 - 大多數Ajax應用程式今天使用的格式。 載入或保存數據 Knockout不強制您使用任何一種特殊技術來載入或保存數據。 您可以... ...


Knockout允許您實現複雜的客戶端交互性,但幾乎所有Web應用程式還需要與伺服器交換數據,或至少將本地存儲的數據序列化。 最方便的交換或存儲數據的方式是JSON格式 - 大多數Ajax應用程式今天使用的格式。

載入或保存數據

Knockout不強制您使用任何一種特殊技術來載入或保存數據。 您可以使用任何適合您所選擇的伺服器端技術的機制。 最常用的機制是jQuery的Ajax方法,例如getJSON,post和ajax。 您可以從伺服器獲取數據:

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

或者您可以向伺服器發送數據:

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數據。 所以,所有Knockout需要幫助你做的是:

  • 要保存,請將您的視圖模型數據轉換為簡單的JSON格式,以便可以使用上述其中一種技術發送它
  • 要載入,請使用您通過上述其中一種方法收到的數據更新視圖模型

將視圖模型數據轉換為純JSON

您的視圖模型是JavaScript對象,因此在某種意義上,您可以使用任何標準JSON序列化程式(例如JSON.stringify(現代瀏覽器中的本地函數)或json2.js library)將它們序列化為JSON。 但是,您的視圖模型可能包含observables,computed observables和observable數組,這些數組實現為JavaScript函數,因此不會在不執行額外工作的情況下完全序列化。

為了便於序列化視圖模型數據,包括observables等,Knockout包括兩個幫助函數:

  • ko.toJS — 這克隆了你的視圖模型的對象圖,用每個observable替換了observable的當前值,所以你得到一個只包含你的數據和沒有Knockout相關的工件
  • ko.toJSON — 這將生成一個JSON字元串,表示您的視圖模型的數據。 在內部,它簡單地在您的視圖模型上調用ko.toJS,然後在結果上使用瀏覽器的原生JSON序列化程式。 註意:為了在沒有本地JSON序列化器(例如,IE 7或更早版本)的舊版瀏覽器上工作,還必須引用json2.js庫。

例如,定義視圖模型如下:

var viewModel = {
    firstName : ko.observable("Bert"),
    lastName : ko.observable("Smith"),
    pets : ko.observableArray(["Cat", "Dog", "Fish"]),
    type : "Customer"
};
viewModel.hasALotOfPets = ko.computed(function() {
    return this.pets().length > 2
}, viewModel)

它包含可觀察量,計算可觀察量,可觀察數組和平均值的混合。 您可以將其轉換為適用於使用ko.toJSON發送到伺服器的JSON字元串,如下所示:

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

註意,ko.toJSON接受與JSON.stringify相同的參數。 例如,在調試Knockout應用程式時,對視圖模型數據進行“實時”表示是非常有用的。 要為此目的生成格式良好的顯示,可以將空格參數傳遞給ko.toJSON並綁定到視圖模型,如:

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

使用JSON更新視圖模型數據

如果您從伺服器載入了一些數據,並希望使用它來更新您的視圖模型,最直接的方法是:

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

在許多情況下,這種直接方法是最簡單和最靈活的解決方案。 當然,當您更新視圖模型上的屬性時,Knockout將會更新可見的UI來匹配它。

然而,許多開發人員更喜歡使用更多的基於約定的方法來使用傳入數據更新他們的視圖模型,而不需要為每個要更新的屬性手動編寫一行代碼。 如果您的視圖模型具有許多屬性或深層嵌套的數據結構,這可能是有益的,因為它可以大大減少您需要編寫的手動映射代碼的數量。 有關此技術的更多詳細信息,請參閱以後章節的knockout.mapping插件。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 調用 localstorge、cookies 等本地存儲方式 方法一:使用localStorage 使用localStorage.setItem(key,value);添加內容 使用storage事件監聽添加、修改、刪除的動作 window.addEventListener("storage",fu ...
  • <script type="text/javascript"> window.onload = function cc() { var tr=document.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ tr[i].style. ...
  • 我現在做的一個項目是angular,但是我用直接引用百度地圖的方法引進js,寫html,js代碼,發現,我去,報錯了,我一開始還以為是百度地圖跟angular有衝突,然後我就去搜索啊,發現angular也有一個百度地圖插件,無奈我用了報錯了,網上說要用angular2版本才能相容,但是我又不會下載2 ...
  • 我們中國嘛傳統段落就是要首行縮進兩個字,首先首行縮進的css是text-indent: 然後這個值是多少呢,一般你的字母的font-size是多少,text-indent:2*font-size的值 比如你的字的字體大小是16px,那麼你想讓段落首行縮進兩個字的話就是text-indent:2*16 ...
  • [TOC] 名詞解釋 state: 它是組件的屬性,主要用來存儲組件自身需要的數據。 虛擬DOM: 它是ReactJS中提出的一個概念,是將真實的DOM結構映射成一個JSON數據結構。 1.組件生命周期 1.創建階段 :該方法會返回一個對象,並緩存下來。然後與父組件指定的props對象合併,最後賦值 ...
  • 註意:這個速率限制API是在Knockout 3.1.0中添加的。 通常,更改的observable立即通知其訂戶,以便依賴於observable的任何計算的observable或綁定都會同步更新。 但是,rateLimit擴展器會導致observable在指定的時間段內抑制和延遲更改通知。 因此,... ...
  • 首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果: 準備工作1:設置Meta標簽 這段代碼的幾個參數解釋: width = device-width:寬度等於當前設備的寬度 initial-scale:初始的縮放比例(預設設置為1.0) minimum-scale:允許 ...
  • 在使用avalonJS做前端開發時,需要圈定數據綁定作用域,存在三種方式: (1)ms-controller:此綁定屬性會按著就近原則來圈定作用域,先從本標簽開始網上查找 (2)ms-important:此綁定屬性僅查找本標簽,倘若查找不到vm綁定數據則原樣輸出在頁面上 (3)ms-skip:此綁定 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...