knockoutJS学习笔记09：使用mapping插件

2023-01-04 09:17:36

一、问题引出

　　通常，我们先定义好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等，我们可以灵活选择使用。

码农公寓

相关文章