如何使剔除可观察数组中的对象属性可观察？

Posted 2023-03-27

【中文标题】如何使剔除可观察数组中的对象属性可观察？

【英文标题】：How to make object properties in a knockout observable array be observable?

【发布时间】：2014-10-23 16:23:39

【问题描述】：

当在剔除映射中使用“create”选项时，我们会将数组设为可观察数组。 但是我们如何让 observable 数组中每个对象的属性成为 observable 呢？

在淘汰文档的这个例子中，children 数组是一个可观察的数组，但我想让每个对象字面量中的所有元素（如 id、name）也成为可观察的。我们如何做到这一点。只需在创建块中的每个新对象上添加一个ko.observable 即可？

var data = 
    name: 'Graham',
    children: [
         id : 1, name : 'Lisa' 
    ]
;

// Your custom data model
var myChildModel = function (data) 
    this.id = data.id;
    this.name = data.name;
;

var mapping = 
    'children': 
        create: function(options) 
            return new myChildModel(options.data);
        
    
;

var viewModel = ko.mapping.fromJS(data, mapping);

【参考方案1】：

简单地说：

var viewModel = ko.mapping.fromJS(data);

它做所有事情，使属性和数组都可观察。此方法的第二个参数仅用于自定义目的。不需要就不用了！

【参考方案2】：

根据documentation：

对象的所有属性都转换为可观察对象。

因此，在关于使用“create”自定义对象构造的部分中，它指出

当然，在创建回调中，您可以再次调用 ko.mapping.fromJS 如果你愿意的话。

提供的例子如下：

var myChildModel = function(data) 
  ko.mapping.fromJS(data, , this);

  this.nameLength = ko.computed(function() 
    return this.name().length;
  , this);

当然，这会转换所有属性。然后可以将更详细的配置专门应用于该映射调用以处理自定义要求。

【参考方案3】：

快速的答案是让对象的属性可观察

var myChildModel = function (data) 
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
;

这也可能是最简单的方法，虽然还有其他方法