天天看點

Knockout.Js官網學習(Mapping插件)

前言

  Knockout設計成允許你使用任何JavaScript對象作為view model。必須view model的一些屬性是observable的,你可以使用KO綁定他們到你的UI元素上,當這些observable值改變的時候,這些UI元素就會自動更新。

使用mapping要引用的Js檔案https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output。

手工mapping

顯示目前伺服器時間和你網站上的目前使用者數。你應該使用如下的view model來代表你的這些資訊:

然後綁定view model到HTML元素上,如下:

由于view model屬性是observable的,在他們變化的時候,KO會自動更新綁定的HTML元素。

接下來,從伺服器擷取最新的資料。或許每隔5秒你要調用一次Ajax請求(例如,使用jQuery的$.getJSON或$.ajax函授):

背景調用方法傳回JSON資料

并且定義了一個簡單的實體類

傳回資料顯示為

Knockout.Js官網學習(Mapping插件)

最後,用這些資料更新你的view model(不使用mapping插件),代碼上面也有,就是

最終頁面就通過Ko自動更新綁定了資料

Knockout.Js官網學習(Mapping插件)

為了使資料顯示在頁面上,所有的屬性都要像這樣寫代碼。如果你的資料結構很複雜的話(例如,包含子對象或者數組),那就維護起來就相當痛苦。mapping插件就是來讓你的JavaScript簡單對象(或JSON結構)轉換成observable的view model的。

使用ko.mapping

通過mapping插件建立view model,直接使用ko.mapping.fromJS函數來建立:

它會自動将data裡所有的屬性建立成observable類型的屬性。你可以通過ko.mapping.fromJS 函數定期從伺服器擷取資料,然後更新你的view model:

如何mapping

  對象的所有屬性都被轉換成observable類型值,如果擷取的對象的值改變了,就會更新這個observable類型的值.

     數組也被轉換成了observable數組,如果伺服器更新改變了數組的個數,mapping插件也會添加或者删除相應的item項,也會盡量保持和原生JavaScript數組相同的order順序。

Unmapping

如果你想讓map過的對象轉換成原來的JavaScript對象,使用如下方式:

Knockout.Js官網學習(Mapping插件)

此時對之前建立的實體類對象的兩個字段名稱進行了修改,要與View Model中屬性的名稱保持一緻。

會建立一個unmapped對象,隻包含你之前map過的對象屬性,換句話說,你在view model上手工添加的屬性或者函數都會被忽略的,唯一例外的是_destroy屬性是可以unmapped回來的,因為你從ko.observableArray裡destroy一個item項的時候會生成這個屬性。 請參考“進階用法”小節如何配置使用。

與JSON字元串一起使用

如果你的Ajax調用傳回的是JSON字元串(而不是反序列化後的JavaScript對象),你可以使用ko.mapping.fromJSON函數來建立或者更新你的view model。用ko.mapping.toJSON實作unmap。

使用.from/toJSON函數處理JSON字元串和使用.from/toJS函數處理JS對象是等價的。

繼續閱讀