zoukankan      html  css  js  c++  java
  • 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的结果为

  • 相关阅读:
    Developer 转型记:一个开发平台的“魔力”
    实践录丨如何在鲲鹏服务器OpenEuler操作系统中快速部署OpenGauss数据库
    一图看懂华为云DevCloud如何应对敏捷开发的测试挑战
    华为云GaussDB(DWS)内存知识点,你知道吗?
    在人工智能时代追逐的“后浪”
    【华为云技术分享】DLI跨源|当DLI遇见MongoDB
    授人以渔:stm32资料查询技巧
    云小课 | IPv4枯了,IPv6来了
    揭秘淘宝平台广告策略,拆解最佳投放实践
    520了,用32做个简单的小程序
  • 原文地址:https://www.cnblogs.com/aehyok/p/3380742.html
Copyright © 2011-2022 走看看