knockoutjs中使用mapping插件綁定數據列表

使用KO綁定數據列表示例：

 

1.先申請V，T，T2三個輔助方法，方便調試。聲明viewModel和加載數據時的映射條件mapping 

 

2.先使用ko.mapping.fromJS()將原來的JS對象轉成 ko 中的 viewModel ,並使用ko.applyBindings() 激活Knockout   

 

3.下面這幾行代碼是寫在ajax success回調函數內的。 即：使用result.Data來更新viewModel，在這裏實際上就是更新的users數組，更新過程當中按mapping中的規則爲數組下的每個對象添加4個額外的依賴屬性dependent observables。

 

最後一句有些很差理解，能夠結合下面的幾張控制檯的截圖就好理解些。

a.對比1和4，能夠看到圖4中user對象比1中多了4個屬性，而且這4個對象能夠和其它屬性同樣綁定到Html上去。這樣，咱們在前臺綁定的時候就有了更多的靈活性。

b.再看圖3, 使用ko.mapping.toJS()將viewModel轉成js對象時，這4個對象並沒在其中。

 

結合上面的代碼中的實例來看一看。

1.後臺轉給個人JSON中的IsVip表明用戶是不是vip,是bool格式，我如今要把它綁定到radio buttons上。但ko的 radio buttons 綁定裏要求的參數是字符串。因此，就在每次更新列表時，爲每個對象添加一個臨時的Vip屬性用於頁面顯示就好了，而不用由於數據格式不對就跑到後臺去修改返回的數據源。

2.當我在頁面編輯了某一個用戶後，用ko.mapping.toJS()將這個用戶（ko對象）轉爲JS(JSON)對象，而後就能夠直接用ajax post提交到後臺去。

 

 

 

 

4.下面是最終的顯示效果圖，爲了簡單，頁面綁定時只綁定了PhoneNumber和Look.（手機號碼列綁定 PhoneNumber,頭像列綁定的是Look ）

 

 

來自爲知筆記(Wiz)