使用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. Eclipse中设置jsp文字大小

  2. iOS之NSString类中compare方法的陷阱

    typedef NS_ENUM(NSInteger, NSComparisonResult) {NSOrderedAscending = -1L, NSOrderedSame, NSOrderedDe ...

  3. testng xml中按顺序执行java类

    如红字部份,将安顺序执行4个类 <?xml version="1.0" encoding="UTF-8"?><suite name=" ...

  4. Mysql创建新用户后无法登录，提示 Access denied for user 'username'@'localhost' (using password: YES)

    MySQL创建新用户后无法登录,提示 Access denied for user 'username'@'localhost' (using password: YES) ,多半是因为存在匿名用户, ...

  5. C++混合编程之idlcpp教程Lua篇(8)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial6中,同样加入了四个文件:LuaTutori ...

  6. 软件工程day7

    参与组内讨论,关于新功能“吐槽墙”的UI设计,小组决定使用TabControl控件实施. 于周末几天自己使用PS学习临摹了一些程序的icon,完成度不高. 鉴于正在参与开发的软件为“工具性”+“微社交 ...

  7. 我的ORM之四--删除

    我的ORM索引 删除语法 var 影响行数 = dbr.表.Delete(条件).Execute(); 问题 1.如果没有Where条件,同样会报错.

  8. Spring RabbitMq概述

    Spring AMQP consists of a handful of modules, each represented by a JAR in the distribution. These m ...

  9. 详解SQL集合运算

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 ...

  10. Syncfusion 复选框 ComboBoxAdv

    XAML: <syncfusion:GridTemplateColumn.EditTemplate> <DataTemplate DataType="viewModel:C ...