Knockout.Js官网学习（Mapping高级用法一）

前言

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

使用keys来使对象unique化

你有一个JavaScript对象，如下：

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

 

并且他已经绑定到viewModel

    var viewModel = {
        name: ko.observable("Scot"),
        children: ko.observableArray([{ id: 1, name: 'Alicw' }])
    };

 

使用map插件，你可以将它map到view model上（没任何问题）：

    var data = { name: 'Scott', children: [{ id: 1, 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: 1, 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的结果为