Knockout.Js官网学习(Mapping高级用法一)
前言
有时候,在使用ko.mapping.fromJS的时候,可能有必要去使用mapping的高级用法来定义mapping的详细过程,以后定义了,以后再调用的时候就不必再定义了。这里有一些情形,你可能需要使用这些option。
使用keys来使对象unique化
你有一个JavaScript对象,如下:
- var data = { name: 'Scot', children: [{ id: , name: 'Alicw' }] };
并且他已经绑定到viewModel
- var viewModel = {
- name: ko.observable("Scot"),
- children: ko.observableArray([{ id: , name: 'Alicw' }])
- };
使用map插件,你可以将它map到view model上(没任何问题):
- var data = { name: 'Scott', children: [{ id: , name: 'Alicws' }] };
- ko.mapping.fromJS(data,{},viewModel);
这里发生了两件事:name从Scot变成了Scott,children[0].name从Alicw变成了Alicws。通过调试你可以发现viewModel中的属性已经发生相应的变化更新。
于是,name像我们期望的一样更新了,但是在children数组里,子项Alicw被删除而新项Alicws被添加到数组里。这不是我们所期望的,我们期望的是只是把name从Alicw更新成Alicws,不是替换整个item项。发生的原因是,默认情况下mapping plugin插件只是简单地比较数组里的两个对象是否相等。 因为JavaScript里{ id : 1, name : 'Alicw' }和{ id : 1, name : 'Alicws' }是不相等的,所以它认为喜欢将新项替换掉老项。
解决这个问题,你需要声明一个key让mapping插件使用,用来判断一个对象是新对象还是旧对象。代码如下:
- var mapping = {
- 'children': {
- key: function(data) {
- return ko.utils.unwrapObservable(data.id);
- }
- }
- };
- ko.mapping.fromJS(data, mapping, viewModel);
这样,每次map的时候,mapping插件都会检查数组项的id属性来判断这个数组项是需要合并的还是全新replace的。
用create自定义对象的构造器
如果你想自己控制mapping,你也可以使用create回调。使用回调可以让你自己控制mapping。
举例,你有一个像这样的JavaScript对象:
- var data = { name: 'Graham', children: [{ id: , name: 'Lisa' }] };
如果你想自己map children 数组,你可以这样声明:
- var MyChildModel = function (data) {
- ko.mapping.fromJS(data, {}, this);
- };
- var mapping = { 'children': { create: function (options) { return new MyChildModel(options.data); } } };
- ko.mapping.fromJS(data, mapping, viewModel);
支持create回调的options参数是一个JavaScript对象,包含如下:
data: JavaScript对象,包含child用到的数据
parent:child对象所属的父对象或者数组
如果你想让初始的JavaScript对象带有额外的依赖属性dependent observables:
- var MyChildModel = function (data) {
- ko.mapping.fromJS(data, {}, this);
- this.nameLength = ko.dependentObservable(function () { return this.name().length; }, this);
- };
用update自定义对象的updating
你也可以使用update 回调来自定义一个对象如何更新。它接受一个需要替代的对象以及和create 回调一样的options参数,你应该return更新后的值。
update 回调使用的options参数是一个JavaScript对象,包含如下内容:
data:JavaScript对象,包含child用到的数据
parent:child对象所属的父对象或者数组
observable:如果属性是observable的,这将会写入到实际的observable里
例子,在数据显示之前,在新数据后面附加额外的字符串:
- var data = { name: 'Graham' };
- var mapping = { 'name': { update: function(options) { return options.data + 'foo!'; } } };
- var viewModel = ko.mapping.fromJS(data, mapping);
- alert(viewModel.name());
那么alert的结果为
Knockout.Js官网学习(Mapping高级用法一)的更多相关文章
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- Knockout.Js官网学习(Mapping插件)
前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...
- Knockout.Js官网学习(简介)
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- Knockout.Js官网学习(Mapping高级用法二)
使用ignore忽略不需要map的属性 如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合: " }; var mapping = { 'ignore' ...
- Knockout.Js官网学习(加载或保存JSON数据)
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- Knockout.Js官网学习(模版绑定)
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
- Knockout.Js官网学习(value绑定)
前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...
- Knockout.Js官网学习(event绑定、submit绑定)
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...
- Knockout.Js官网学习(click绑定)
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...
随机推荐
- 【mongo】登陆报错
今天登陆mongo时出现了错误 Error: couldn't connect to server 127.0.0.1:27017 (127.0.0.1), connection attempt fa ...
- cf789c
主要是线性时间内求最大连续和 #include<bits/stdc++.h> using namespace std; #define maxn 200005 #define ll lon ...
- 演示Thread.sleep(100)和Thread.currentThread().isInterrupted()+@Deprecated:将方法标注为废弃的方法
package charpter08; public class TestInterrupt01 { public static void main(String[] args) { Processo ...
- eclipse中Ruby环境搭建
用Eclipse学习Watir.Eclipse支持Ruby的插件:RDT(Ruby Development Tools),下载下来试用了一下,感觉还是不错的.第一步:获取RDT,通过以下链接可以获得R ...
- javaFX中解决填充(拉伸)问题
1.margin设置实现 在项目过程中,遇到此问题,如图: 如果窗口缩小,HBox(左边的包含TitledPane那部分)看不到底部 如果窗口拉大,下面就出现空白,HBox高度没拉神 办法:对包含HB ...
- html中hr的各种样式使用
第一种: <hr style=" height:2px;border:none;border-top:2px dotted #185598;" /> height:2p ...
- NodeMCU入门(3):断线自动重连,指示灯显示连接状态
准备工作 1.NodeMCU模块 2.ESPlorer v0.2.0-rc6 事件监听器 NodeMCU采用了事件响应的方式.也就是说,只需为事件设置一个回调函数,当事件发生时,回调函数就会被调用. ...
- 注册表键值明明存在OpenSubKey始终返回null,解决方案
先上代码及实例 RegistryKey rsg = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Macromedia\FlashPaper Pri ...
- 【Java】 剑指offer(58-2) 左旋转字符串
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部 ...
- 026 使用大数据对网站基本指标PV案例的分析
案例: 使用电商网站的用户行为日志进行统计分析 一:准备 1.指标 PV:网页流浪量 UV:独立访客数 VV:访客的访问数,session次数 IP:独立的IP数 2.上传测试数据 3.查看第一条记录 ...