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)