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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...