你的位置:首页 > Java教程

[Java教程]knockoutJS学习笔记09:使用mapping插件

一、问题引出

  通常,我们先定义好html结构或者模板,通过ajax向后台发起请求,后台返回json数据,然后再将json数据渲染到页面上。以博客园个人博客里的个人信息为例子,如图:

  1.定义html。

  <p>姓名:<span data-bind="text:UserName"></span></p>  <p>园龄:<span data-bind="text:BlogAge"></span></p>  <p>粉丝:<span data-bind="text:FansNumber"></span></p>  <p>关注:<span data-bind="text:FocusNumber"></span></p>

   2.定义ViewModel,其中的数据都是observable的。

  var UserInfoVM = {    UserName:ko.observable(""),    BlogAge:ko.observable(0),    FansNumber:ko.observable(0),    FocusNumber:ko.observable(0)  }    ko.applyBindings(UserInfoVM); 

   3.通过ajax请求数据,并进行数据赋值。由于我们用了observable属性,所以当我们修改视图模型的属性,就会自动更新页面。  

  $.getJSON("../Handlers/KOMapping.ashx",    function(data){      UserInfoVM.UserName(data.UserName);      UserInfoVM.BlogAge(data.BlogAge);      UserInfoVM.FansNumber(data.FansNumber);      UserInfoVM.FocusNumber(data.FocusNumber);  });

  jquery的getJSON函数,callback里的data已经是解析好的json对象,所以不用再用$.parseJSON去解析json字符串。可以看到,要更新viewmodel的值,只能一个一个去更新,如果有多这样的情况或者viewmodel变得复杂,就要为赋值写多很多代码。

二、mapping插件

  mapping插件可以轻松解决上面的问题,让json字符串或者json对象可以与ko监控属性对应起来,而不用我们再去处理这个过程。用mapping插件实现:

  var UserInfo = {    UserName:"",    BlogAge:0,    FansNumber:0,    FocusNumber:0  }  var UserInfoVM = ko.mapping.fromJS(UserInfo);  ko.applyBindings(UserInfoVM);

   这里定义了UserInfo,不需要再用ko.observable去监控属性,因为这个过程由mapping控制。要创建viewmodel,可以通过ko.mapping.fromJS方法,这样viewmodel就是根据UserInfo属性创建的、可监控的对象。用ajax请求数据,并完成绑定:

  $.getJSON("../Handlers/KOMapping.ashx",    function(data){      ko.mapping.fromJS(data,UserInfoVM);        });

   获取数据后,将数据映射到viewmodel即可,用的还是fromJS函数。用了mapping后,不需要再逐个去赋值,在数据结构复杂的情况下,作用会更明显。

三、更多用法

  3.1 toJS

    上面的例子将js对象转换为ko的viewmodel,反过来也可以。如:

    var unmapped = ko.mapping.toJS(UserInfoVM);    console.log(UserInfoVM);//Object {UserName: "little软件员", BlogAge: "1个月", FansNumber: 22, FocusNumber: 4} 

   3.2 fromJSON

    上面用的是jq的getJSON方法,回调函数已经将json字符串转换为对象。如果用的是ajax或其它方法,返回的是json字符串,可以用fromJSON完成字符串到viewmodel的映射。如:ko.mapping.fromJSON(data,UserInfoVM);

  3.3 toJSON

    将viewmodel转换为json字符串。有时候需要把json字符串传递到后台,后台再进行Deserializer,toJSON方法可以轻松完成。

四、高级用法

  以下高级用法来自官网demo,可能不经常用到。

  有时候,在使用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回调的话会调用他们,最后创建一个新对象,并将新对象添加到数组然后返回该新对象。

五、总结

  knockout还有一些其它插件,但其它js库都已经提供了很多好用的插件,例如jquery ui等,我们可以灵活选择使用。