前言
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資料
并且定義了一個簡單的實體類
傳回資料顯示為

最後,用這些資料更新你的view model(不使用mapping插件),代碼上面也有,就是
最終頁面就通過Ko自動更新綁定了資料
為了使資料顯示在頁面上,所有的屬性都要像這樣寫代碼。如果你的資料結構很複雜的話(例如,包含子對象或者數組),那就維護起來就相當痛苦。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對象,使用如下方式:
此時對之前建立的實體類對象的兩個字段名稱進行了修改,要與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對象是等價的。