前言

有时候,在使用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高级用法一)的更多相关文章

  1. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  2. Knockout.Js官网学习(Mapping插件)

    前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...

  3. Knockout.Js官网学习(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  4. Knockout.Js官网学习(Mapping高级用法二)

    使用ignore忽略不需要map的属性 如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合: " }; var mapping = { 'ignore' ...

  5. Knockout.Js官网学习(加载或保存JSON数据)

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  6. Knockout.Js官网学习(模版绑定)

    模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...

  7. Knockout.Js官网学习(value绑定)

    前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...

  8. Knockout.Js官网学习(event绑定、submit绑定)

    event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...

  9. Knockout.Js官网学习(click绑定)

    前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...

随机推荐

  1. 使用@font-family时各浏览器对字体格式(format)的支持情况

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有 ...

  2. [转]Hadoop参数汇总

    出自:https://segmentfault.com/a/1190000000709725 Hadoop参数大全 主要配置文件: core hdfs yarn mapred 重要性表示如下: 重要 ...

  3. linux eclipse 报错过时的方法

    重新配置jre库 https://jingyan.baidu.com/article/7f766daff5b8cd4101e1d0b4.html

  4. php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)

    1.电子邮件地址的校验 <?php /* 校验邮件地址*/ function checkMail($email) { //用户名,由“w”格式字符.“-”或“.”组成 $email_name= ...

  5. SPLAY,LCT学习笔记(一)

    写了两周数据结构,感觉要死掉了,赶紧总结一下,要不都没学明白. SPLAY专题: 例:NOI2005 维修数列 典型的SPLAY问题,而且综合了SPLAY常见的所有操作,特别适合新手入门学习(比如我这 ...

  6. python接口自动化测试十二:对返回的json的简单操作

    # 1.requests里面自带解析器转字典 print(r.json()) print(type(r.json())) # 取出json中的'result_sk_temp'字段 # {"r ...

  7. wmiprvse.exe cpu占用高怎么解决

    可以通过在注册表中设置,来禁用该服务,具体步骤如下:         (1)按下“Win+R”组合键呼出运行,在框中输入“CMD”按下回车打开“命令提示符”:       (2)在命令提示符中输入:r ...

  8. BZOJ1040 [ZJOI2008]骑士 基环树林(环套树) 树形动态规划

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题意概括 有n个人,每一个人有一个最恨的人. 并且,每一个人有一个权值. 一个人不可以和他最恨的人同时被选中. 现在请你求出在 ...

  9. go语言学习-基础知识

    go程序的基本结构 一个可以最简单的可运行的go程序需要满足下面两个条件: 有一个main()函数 main()函数在main包中 例如: 在go语言中的 hello world 程序如下: // m ...

  10. QT-1-环境搭建QT5.4.1&MinGW4.9.1

    1.最近在电脑上尝试了搭建QT的环境,原本准备利用VS2013+QT5.51环境,虽然安装很容易但是部署程序时,我是没能做到部署到其他机器,原因还是DLL搞不定: 2.参考友善之臂的MiniTools ...