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)

时间: 2024-11-04 20:47:19

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

Windows Phone 8.1中数据绑定之二(绑定数据不变更的解决方案)

绑定有三种绑定模式,绑定也分UI到UI的绑定和自定义数据源到UI的绑定. 其中自定义数据源到UI的绑定是比较复杂的.如果我们利用数据上下文DataContext来绑定数据,当我们改变数据源 数据时,会发现绑定目标UI上对应的数据并没有发生改变,按理来说采用的是默认绑定OneWay模式,数据源的更改 应该会导致界面UI的目标属性发生修改. 这是为什么呢?因为具体的数据源属性并没有实现更改通知,数据源数据更改了但是无法通知到目标UI上,通俗点来 讲就是,数据源你自顾自的改动,你不通知一下作为UI的我

关于angularJS绑定数据时自动转义html标签

折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-saniti

关于angularJS绑定数据时自动转义html标签(转载-漆黑的小白)

原文:http://okashii.lofter.com/post/1cba87e8_29e0fabangularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sani

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

关于angularJS绑定数据时自动转义html标签 折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中.而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sani

Django测试开发-34- xadmin模板中添加action插件

一.action插件介绍 1. Action插件在数据列表页面上提供数据选择功能.可以在Action之后专门处理所选数据.批量删除功能作为默认操作提供. 2. 要启用Action,开发人员可以设置Model 中Class的属性“actions”,这是一种列表类型. xadmin官方地址:https://xadmin.readthedocs.io/en/latest/plugins.html 二.具体操作 1. 首先需要一个Action类,继承BaseActionView from xadmin.

Mybatis中实体类属性与数据库列表间映射方法介绍

           这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考.         Mybatis不像Hibernate中那么自动化,通过@Column注解或者直接使用实体类的属性名作为数据列名,而是需要自己指定实体类属性和数据表中列名之间的映射关系,这一点让用惯了Hibernate的人很不习惯,所幸经过探索找到了建立映射关系的几种办法,其中总也有比较简单的. 首先定义一个实体类User,如下: public class User { pr

KnockoutJS 3.X API 第八章 映射(mapping)插件

Knockout旨在允许您将任意JavaScript对象用作视图模型. 只要一些视图模型的属性是observables,您可以使用KO将它们绑定到您的UI,并且UI将在可观察属性更改时自动更新. 大多数应用程序需要从后端服务器获取数据. 由于服务器没有任何可观察的概念,它只提供一个纯JavaScript对象(通常序列化为JSON). 映射插件提供了一种简单的方法来将该简单的JavaScript对象映射到具有适当的observables的视图模型中. 这是替代手动编写自己的JavaScript代码

在DevExpress程序中使用GridView直接录入数据的时候,增加列表选择的功能

在我上篇随笔<在DevExpress程序中使用Winform分页控件直接录入数据并保存>中介绍了在GridView以及在其封装的分页控件上做数据的直接录入的处理,介绍情况下数据的保存和校验等操作,不过还没有涉及到数据列表选择的这种方式,而这种在项目应用也是比较广泛的一种输入方式.本篇随笔继续探讨在GridView上直接录入数据,并增加字典选择列表的功能. 1.GridView直接录入数据回顾 在之前整合的数据录入案例里面,我们可以看到可以在列表里面直接录入速度的便捷性,如下所示. 1)直接在G

c#中DropDownList控件绑定枚举数据

c# asp.net 中DropDownList控件绑定枚举数据 1.枚举(enum)代码: private enum heros { 德玛 = 0, 皇子 = 10, 大头 = 20, 剑圣 = 30, } 如果不为枚举数列表中的元素指定值,则它们的值将自动递增,从1开始. 2.cs代码: private void LoadData() { //检索枚举heros返回包含每个成员的值的数组 Array herosArray = Enum.GetValues(typeof(heros)); fo