使用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. 带回调函数的js运动框架

    function startMove(obj, json, endFun) { //开始前关闭之前obj上的定时器 clearInterval(obj.timer); //定时器 obj.timer ...

  2. Java 后台获取当前时间

    Calendar c = Calendar.getInstance();//可以对每个时间域单独修改 int year = c.get(Calendar.YEAR); int month = c.ge ...

  3. alfresco install in linux, and integrated with tesseract ocr

    本文描述在Linux系统上安装Alfresco的步骤: 1. 下载安装文件:alfresco-community-5.0.d-installer-linux-x64.bin 2. 增加执行权限并执行: ...

  4. 简单易懂的Activity四种启动模式

    Activity的四种启动模式 我们在项目开发的过程中,会涉及到应用中各个Activity的跳转,有些Activity是可以复用,不用重复加载,节约内存的使用. 将第二个Activity的启动模式修改 ...

  5. 跳转页面，传递参数——android

    android 跳转页面并传递对象(实体类)——项目中是集港收货类 网上资料:两种传递方法Serializable,parcelable 优劣比较:Serializable数据更持久化,网络传输或数据 ...

  6. 解决eclipse-helios中Errors running builder JavaScript Validator的问题(转)

    原文地址:http://hi.baidu.com/%B3%BF%D1%F4%C2%FE%B2%BD/blog/item/2528f6de3ca90955ccbf1a3f.html 最近下载了eclip ...

  7. 我的c漏洞

    传入指针参数 #include<stdio.h> #include<stdlib.h> void READ(int *a) { scanf("%d",a); ...

  8. 使用的组件：Layui

    Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...

  9. Web Essentials之Browser Link

    返回Web Essentials功能目录 本篇目录 功能 当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Li ...

  10. IM系统中聊天记录模块的设计与实现

    看到很多开发IM系统的朋友都想实现聊天记录存储和查询这一不可或缺的功能,这里我就把自己前段时间为傲瑞通(OrayTalk)开发聊天记录模块的经验分享出来,供需要的朋友参考下. 一.总体设计 1.存储位 ...