使用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）

 
 

knockoutjs中使用mapping插件绑定数据列表的更多相关文章

  1. GridView后台绑定数据列表方法

    在很多时候数据绑定都是知道了数据表中的表字段来绑定GridView控件的,那时候我就有个想法希望通过表明来查询数据库中的字段来动态的绑定GirdView控件数据并提供了相关的操作列,在网上找了一些资料 ...

  2. MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

    返回目录 对于一个JS对象来说,如果希望将所有属性进行监视,在之前我们需要一个个对属性添加ko.observable方法,而有了Mapping插件后,它可以帮助我们这件事． 在Mapping出现之前 ...

  3. .net MVC中使用angularJs刷新页面数据列表

    使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下: @{ Layout = null; } <!DOCTYPE ht ...

  4. Silverlight中的TabControl如何绑定数据？重写tabcontrol和tabItem 解决绑定友好问题。可以绑定对象集合

    在 WPF 中,TabControl 可以直接将 ItemsSource 绑定数据源,见 将 TabControl 绑定到数据的示例 http://msdn.microsoft.com/zh-cn/l ...

  5. angularjs中的单选框绑定数据注意事项

    这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...

  6. laravel框架中使用QueryList插件采集数据

    laravel框架中使用queryList 采集数据 采集数据对我们来说真家常便饭,那么苦苦的写正则采集那么一点点东西,花费了自己大把的时间和精力而且没有一点技术含量,这个时候就是使用我们的好搭档Qu ...

  7. DevExpress中GridControl的重新绑定数据后如何刷新 （转）

    如果对girdcontrol的datasource新添加数据,重新刷新, gridControl1.DataSource = list; gridView1.RefreshData();

  8. 使用DolphinPHP的框架中的excel插件导入数据

    直接上函数吧 public function importfile() { if ($this->request->isPost()) { if($_POST['files']) { Cu ...

  9. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

随机推荐

  1. 7.4 MVC vs MVP

    MVC(Model_view_contraller)"模型_视图_控制器". MVC应用程序总是由这三个部分组成.Event(事件)导致Controller改变Model或View ...

  2. 对于git的认识

    对于git的认识,我只想说,我不会把他的概念复制下来在博客上再发一遍,我对于他的了解是代源码的开放编写.对于git我会在今后去认真的理解他,不是所谓的抄袭.不会的东西我会尽力去学习.

  3. Individual Project - Word frequency program - Multi Thread And Optimization

    作业说明详见:http://www.cnblogs.com/jiel/p/3978727.html 一.开始写代码前的规划: 1.尝试用C#来写,之前没有学过C#,所以打算先花1天的时间学习C# 2. ...

  4. RHEL5.8的NFS配置文件

    RHEL5.8的NFS配置文件 路径:/etc/sysconfig/nfs # # Define which protocol versions mountd # will advertise. Th ...

  5. velocity导出word报错解决

  6. 一些Python的惯用法和小技巧：Pythonic

    Pythonic其实是个模糊的含义,没有确定的解释.网上也没有过多关于Pythonic的说明,我个人的理解是更加Python,更符合Python的行为习惯.本文主要是说明一些Python的惯用法和小技 ...

  7. GP调用arctoolbox 以Clip为例

    GP的功能非常强大,也是GIS建模的一个很重要的工具.在Arcengine中,实现Clip功能很多种方法,可以用IBasicGeoprocessor的clip方法,但是GP无疑是最简单的. publi ...

  8. \(\S1 \) Gaussian Measure and Hermite Polynomials

    Define on \(\mathbb{R}^d\) the normalized Gaussian measure\[ d \gamma(x)=\frac{1}{(2\pi)^{\frac{d}{2 ...

  9. hander消息机制原理

    基本原理 线程中调用Handler.sendMsg()方法(参数是Message对象),将需要Main线程处理的事件 添加到Main线程的MessageQueue中,Main线程通过MainLoope ...

  10. 软将工程课设day1与day2

    在稍迟的时候,收集了三份用户体验,自己编辑整理之后上交于组. 和老师确定了一下每日的工作流程与需要提交的任务. 与组讨论了软件优化方向,包括整理收集到的“反馈信息”.“额外需求信息”.“体验信息”.