Knockout应用开发指南 第七章:Mapping插件

原文:Knockout应用开发指南 第七章:Mapping插件

Mapping插件

Knockout设计成允许你使用任何JavaScript对象作为view model。必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些observable值改变的时候,这些UI元素就会自动更新。

绝大多数程序都需要从服务器端获取数据,但是由于服务器不知道observable的概念是什么,它只支持简单的JavaScript对象(通常是序列化以后的JSON),mapping插件可以让你很方便地将简单JavaScript对象mapp到带有observable值的view model。你也可以自己写JavaScript代码将从服务器获取的数据来构建 view model,mapping插件只是一种很好的替代而已。

 下载

    Version 2.0 (最小版本8.6kb)


例子:手工mapping

显示当前服务器时间和你网站上的当前用户数。你应该使用如下的view model来代表你的这些信息:

var viewModel = {    serverTime: ko.observable(),    numUsers: ko.observable()}

然后绑定view model到HTML元素上,如下:

The time on the server is: <span data-bind='text: serverTime'></span>and <span data-bind='text: numUsers'></span> user(s) are connected.

由于view model属性是observable的,在他们变化的时候,KO会自动更新绑定的HTML元素。

接下来,从服务器获取最新的数据。或许每隔5秒你要调用一次Ajax请求(例如,使用jQuery的$.getJSON或$.ajax函授):

var data = getDataUsingAjax();          // Gets the data from the server

然后,服务器返回和下面相似的JSON数据:

{    serverTime: '2010-01-07',    numUsers: 3}

最后,用这些数据更新你的view model(不使用mapping插件),代码如下:

// Every time data is received from the server:viewModel.serverTime(data.serverTime);viewModel.numUsers(data.numUsers);

为了使数据显示在页面上,所有的属性都要像这样写代码。如果你的数据结构很复杂的话(例如,包含子对象或者数组),那就维护起来就相当痛苦。mapping插件就是来让你让你的JavaScript简单对象(或JSON结构)转换成observable的view model的。

 

例子:使用ko.mapping

通过mapping插件创建view model,直接使用ko.mapping.fromJS函数来创建:

var viewModel = ko.mapping.fromJS(data);

它会自动将data里所有的属性创建成observable类型的属性。你可以通过ko.mapping.fromJS 函数定期从服务器获取数据,然后更新你的view model:

// Every time data is received from the server:ko.mapping.fromJS(data, viewModel);

 

如何mapping?

    对象的所有属性都被转换成observable类型值,如果获取的对象的值改变了,就会更新这个observable类型的值.

    数组也被转换成了observable数组,如果服务器更新改变了数组的个数,mapping插件也会添加或者删除相应的item项,也会尽量保持和原生JavaScript数组相同的order顺序。

 

Unmapping

如果你想让map过的对象转换成原来的JavaScript对象,使用如下方式:

var unmapped = ko.mapping.toJS(viewModel);

会创建一个unmapped对象,只包含你之前map过的对象属性,换句话说,你在view model上手工添加的属性或者函数都会被忽略的,唯一例外的是_destroy属性是可以unmapped回来的,因为你从ko.observableArray里destroy一个item项的时候会生成这个属性。 请参考“高级用户”小节如何配置使用。

 

与JSON字符串一起使用

如果你的Ajax调用返回的是JSON字符串(而不是反序列化后的JavaScript对象),你可以使用ko.mapping.fromJSON函数来创建或者更新你的view model。用ko.mapping.toJSON实现unmap。

使用.from/toJSON函数处理JSON字符串和使用.from/toJS函数处理JS对象是等价的。

 

高级用法

有时候,在使用ko.mapping.fromJS的时候,可能有必要去使用mapping的高级用法来定义mapping的详细过程,以后定义了,以后再调用的时候就不必再定义了。这里有一些情形,你可能需要使用这些option。

 

用法1:使用keys来使对象unique化

你有一个JavaScript对象,如下:

var data = {    name: 'Scot',    children: [        { id: 1, name: 'Alicw' }    ]}

使用map插件,你可以将它map到view model上(没任何问题):

var viewModel = ko.mapping.fromJS(data);

现在,数据被更新成如下这样:

var data = {    name: 'Scott',    children: [        { id: 1, name: 'Alice' }    ]}

这里发生了两件事:name从Scot变成了Scott,children[0].name从Alicw变成了Alice。你可以用如下代码更新view model:

ko.mapping.fromJS(data, viewModel);

于是,name像我们期望的一样更新了,但是在children数组里,子项Alicw被删除而新项Alice被添加到数组里。这不是我们所期望的,我们期望的是只是把name从Alicw更新成Alice,不是替换整个item项。发生的原因是,默认情况下mapping plugin插件只是简单地比较数组里的两个对象是否相等。 因为JavaScript里{ id : 1, name : 'Alicw' }和{ id : 1, name : 'Alice' }是不相等的,所以它认为喜欢将新项替换掉老项。

解决这个问题,你需要声明一个key让mapping插件使用,用来判断一个对象是新对象还是旧对象。代码如下:

var mapping = {    'children': {        key: function (data) {return ko.utils.unwrapObservable(data.id);        }    }}

var viewModel = ko.mapping.fromJS(data, mapping);

这样,每次map的时候,mapping插件都会检查数组项的id属性来判断这个数组项是需要合并的还是全新replace的。

 

用法2:用create自定义对象的构造器

如果你想自己控制mapping,你也可以使用create回调。使用回调可以让你自己控制mapping。

举例,你有一个像这样的JavaScript对象:

var data = {    name: 'Graham',    children: [        { id: 1, name: 'Lisa' }    ]}

如果你想自己map children 数组,你可以这样声明:

var mapping = {    'children': {        create: function (options) {return new myChildModel(options.data);        }    }}

var viewModel = ko.mapping.fromJS(data, mapping);

支持create回调的options参数是一个JavaScript对象,包含如下:

  • data: JavaScript对象,包含child用到的数据
  • parent:child对象所属的父对象或者数组

 当然,在内部的create回调里,你也可以再次调用ko.mapping.fromJS。一个例子就是:如果你想让初始的JavaScript对象带有额外的依赖属性dependent observables:

var myChildModel = function (data) {    ko.mapping.fromJS(data, {}, this); 

this.nameLength = ko.dependentObservable(function () {return this.name().length;    }, this);}

 

用法3:用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的结果是:Grahamfoo!。

 

用法4:使用ignore忽略不需要map的属性

如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合:

var mapping = {    'ignore': ["propertyToIgnore", "alsoIgnoreThis"]}

var viewModel = ko.mapping.fromJS(data, mapping);

你声明的忽略数组被编译到默认的ignore数组里。你可以像下面代码一样来维护它:

var oldOptions = ko.mapping.defaultOptions().ignore;ko.mapping.defaultOptions().ignore = ["alwaysIgnoreThis"];

 

用法5:使用include声明需要map的属性

默认情况下,当map你的view model回到JS对象是时候,只map原始view model里拥有的属性(除了例外的_destroy属性),不过,你可以使用include参数来定制:

var mapping = {    'include': ["propertyToInclude", "alsoIncludeThis"]}

var viewModel = ko.mapping.fromJS(data, mapping);

你声明的include数组被编译到默认的include数组里,默认只有_destroy。 你可以像这样来维护:

var oldOptions = ko.mapping.defaultOptions().include;ko.mapping.defaultOptions().include = ["alwaysIncludeThis"];

 

用法6:使用copy来复制属性

默认情况下,map的时候是把所有的值都转换成observable的,如果你只是想copy属性值而不是替换成observable的,你可以将属性名称添加到copy数组:

var mapping = {    'copy': ["propertyToCopy"]}

var viewModel = ko.mapping.fromJS(data, mapping);

你声明的copy数组被编译到默认的copy数组里,默认值是空。你可以像这样来维护:

var oldOptions = ko.mapping.defaultOptions().copy;ko.mapping.defaultOptions().copy = ["alwaysCopyThis"];

 

用法7:Specifying the update target

在上面的例子,如果你想再一个class内map,你可以使用第三个参数作为操作的目标,例如:

ko.mapping.fromJS(data, {}, someObject); // overwrites properties on someObject

所以,如果你想map一个JavaScript对象到this上,你可以这样声明:

ko.mapping.fromJS(data, {}, this);

 

从多数据源map

你可以通过多次使用ko.mapping.fromJS 来将多个JS对象的数据源map到一起,例如:

var viewModel = ko.mapping.fromJS(alice, aliceMappingOptions);ko.mapping.fromJS(bob, bobMappingOptions, viewModel);

你声明的mapping选项option在每次调用的时候都会合并。

 

Map以后的observable数组

map插件map以后生产的observable数组,带有几个额外的函数来处理带有keys的mapping:

  • mappedRemove
  • mappedRemoveAll
  • mappedDestroy
  • mappedDestroyAll
  • mappedIndexOf

 它们是和ko.observableArray里的函数等价的,不同是他们通过key来处理对象。例如:

var obj = [    { id: 1 },    { id: 2 }]

var result = ko.mapping.fromJS(obj, {    key: function (item) {return ko.utils.unwrapObservable(item.id);    }});

result.mappedRemove({ id: 2 });

map过的observable数组,除了上面的函数还支持一个mappedCreate函数:

var newItem = result.mappedCreate({ id: 3 });

首先会检查key(id=3)在数组里是否存在(如果存在则抛出异常),然后,如果有create和 update回调的话会调用他们,最后创建一个新对象,并将新对象添加到数组然后返回该新对象。

 

下载

    Version 2.0 (最小版本8.6kb)

时间: 2024-09-29 06:29:12

Knockout应用开发指南 第七章:Mapping插件的相关文章

Knockout应用开发指南 第六章:加载或保存JSON数据

原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程序也是使用这种格式.   加载或保存数据 Knockout不限制你用任何技术加载和保存数据.你可以使用任何技术和服务器来交互.用的最多的是使用jQuery的Ajax帮助,例如:getJSON,post和ajax.你

Knockout应用开发指南 第三章:绑定语法(3)

原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单控件的时候, view model对应的属性值会自动更新.同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新. 注:如果你在checkbox或者radio button上使用checked绑定

Knockout应用开发指南 第三章:绑定语法(2)

原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 例子 <div> You've clicked <span data-bind="text: numberOfClicks"></span> times<button data-bi

Knockout应用开发指南 第四章:模板绑定

原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方便.默认情况, Knockout用的是流行的jquery.tmpl模板引擎.使用它的话,需要在安装页面下载和引用jquery.tmpl和jQuery框架.或者你也可以集成其它的模板引擎(虽然需要了解Knockout 内部知识才行).   例子 <div data-bind='template: &quo

Knockout应用开发指南 第五章:创建自定义绑定

原文:Knockout应用开发指南 第五章:创建自定义绑定 创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid,tabset等这样的绑定. 重要:以下文档只应用在Knockout 1.1.1和更高版本,Knockout 1.1.0和以前的版本在注册API上是不同的.   注册你的绑定 添加子属性到ko.bindingHandlers来注册

Knockout应用开发指南 第三章:绑定语法(1)

原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此行代码. 1   visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: shouldShowMessage"> You will see this me

Knockout应用开发指南 第一章:入门

原文:Knockout应用开发指南 第一章:入门 1    Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要概念: 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上. UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI

Knockout应用开发指南 第九章:高级应用举例

原文:Knockout应用开发指南 第九章:高级应用举例 1   Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的,我们可以看看Knockout实现是难了还是容易了. 代码量的多少不重要(尽快Knockout 的实现很简洁),重要的看起来是否容易理解且可读.查看HTML源代码,看看如何实现的view model以及绑定的.     代码: View View Code <h2>Contacts</h2&

Knockout应用开发指南 第二章:监控属性(Observables)

原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性.依赖监控属性和监控数组),如果有好的建议请指正,多谢. 1     创建带有监控属性的view model Observables Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪