Knockoutjs可以幫助我們實現復雜的客戶端交互,但是在很多的時候我們需要和我們的服務器進行數據交互或者至少將數據序列化到我們的本地存儲器。此時我們就可以使用JSON格式數據進行數據的交互和保存了。
一、加載和保存數據。
Knockoutjs並不強制要求我們使用某個具體的技術來進行數據的讀取和保存,我們可以根據自己的需要使用不同的技術,我們經常使用的是JQuery的Ajax方式,比如:getJSON、post和ajax等,我們可以使用下面的方法從服務器取得數據:
1 $.getJSON("/some/url", function(data) { 2 // Now use this data to update your view models, 3 // and Knockout will update your UI automatically 4 })
你也可以使用下面的方法向你的服務器發送數據:
1 var data = /* Your data in JSON format - see below */; 2 $.post("/some/url", data, function(returnedData) { 3 // This callback is executed if the post was successful 4 })
如果你不想使用JQuery的話,你也可以使用其他的技術來取得和發送數據,無論如何,Knockoutjs可以幫助你做如下的兩件事情:
(1)、保存數據:Knockoutjs可以將View Model中的數據保存到JSON中,這樣你就可以使用相應的技術將數據傳到服務器進行保存。
(2)、加載數據:Knockoutjs將你取得到的數據傳送到對應的View Model,從而改變View Model層的數據,這樣你的頁面展示的數據也會隨之改變了。
二、將View Model層數據轉換成JSON數據。
我們的View Model是一個個的JavaScript對象,所以在某種意義上,我們可以使用JSON的序列化函數將此轉換為JSON數據,比如:JSON.serialize()(現在有很多瀏覽器內嵌了此函數)和json2.js。但是,我們的View Model中可能包含observables、computed observables和observable arrays等,這些內容都是作為JavaScript方法進行編譯的,此時使用以上的方式並不能完全按照我們的意思把View Model轉換為JSON數據。
為了更加方便的將View Model的數據轉換為JSON數據,Knockoutjs為我們提供了一些幫助:
(1)、ko.toJS:克隆View Model對象的結構,以當前observable的值代替observable,因此我們僅僅得到了一個View Model的備份,這個備份和Knockoutjs綁定並無關聯。
(2)、ko.toJSON:此方法將View Model的數據轉換為JSON格式數據,其實現原理就是先通過ko.toJS得到一份View Model的備份,然后通過瀏覽器本地的JSON序列化函數得到JSON數據。(注:有的瀏覽器可能沒有內置JSON的序列化函數,此時我們可以導入json2.js來進行使用)。
例:定義以下的View Model。
1 <script type="text/javascript"> 2 var viewModel = { 3 firstName: ko.observable("Bert"), 4 lastName: ko.observable("Smith"), 5 pets: ko.observableArray(["Cat", "Dog", "Fish"]), 6 type: "Customer" 7 }; 8 viewModel.hasALotOfPets = ko.computed(function () { 9 return this.pets().length > 2 10 }, viewModel); 11 ko.applyBindings(viewModel); 12 </script>
此View Model中包含了observables、computed observables、observable arrays和plain values,此時我們可以使用ko.toJSON將其轉換為JSON數據:
1 var jsonData = ko.toJSON(viewModel); 2 3 // Result: jsonData is now a string equal to the following value 4 // '{"firstName":"Bert","lastName":"Smith","pets":["Cat","Dog","Fish"],"type":"Customer","hasALotOfPets":true}'
或者你僅僅想得到他的備份你可以使用:
1 var plainJs = ko.toJS(viewModel); 2 3 // Result: plainJS is now a plain JavaScript object in which nothing is observable. It's just data. 4 // The object is equivalent to the following: 5 // { 6 // firstName: "Bert", 7 // lastName: "Smith", 8 // pets: ["Cat","Dog","Fish"], 9 // type: "Customer", 10 // hasALotOfPets: true 11 // }
我們的ko.toJSON也可以接受和JSON.stringify同樣的參數,此時我們就可以像如下去使用ko.toJSON了:
1 <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
三、使用JSON數據來更新View Model的數據。
如果我們已經從服務段接受到了數據,並且想要用它來更新我們View Model層的數據,此時最直接的方法就是要我們自己去實現了:
1 // Load and parse the JSON 2 var someJSON = /* Omitted: fetch it from the server however you want */; 3 var parsed = JSON.parse(someJSON); 4 5 // Update view model properties 6 viewModel.firstName(parsed.firstName); 7 viewModel.pets(parsed.pets);
在很多的情況下,我們還是要豐衣足食的,當我們更新完View Model的數據之后,Knockoutjs會自動的幫助我們更新UI層的展示。
然而,在很多情況下,很多的開發者可能會使用更為方便的方法來更新View Model層的數據,此時可能只需要編寫一行代碼對應View Model中的數據就全部更新了,這樣就非常的方便,比如我們的View Model有很多的屬性,或者嵌套了很多層,我們就可以使用此方式,可以大大減少我們的代碼量,具體的方法我們在mapping plugin會具體的介紹。
