Knockout应用开发指南之Mapping插件

绝大多数程序都需要从服务器端获取数据，但是由于服务器不知道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:  
  
  
  and  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。

#p#

用法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!。

#p#

用法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)

原文：http://www.cnblogs.com/TomXu/archive/2011/11/29/2257054.html

网站名称：Knockout应用开发指南之Mapping插件
文章网址：http://www.shufengxianlan.com/qtweb/news39/499589.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容