knockoutjs 映射：在树中添加 observables

Question

我正在使用 knockoutjs 来可视化一棵树。我有一个初始的 AJAX 调用来加载孔树。映射使用敲除映射插件进行。一切正常 :) 感谢这个伟大的软件。

我的问题是：我想在模型中添加额外的 observables。我可以使用映射选项来做到这一点。

对象：

{ id: ko.observable(), parentID: ko.observable(), description: ko.observable(), children: ko.observableArray() }

映射选项：

var mappingOptions = {
            create: function (options) {
                console.log("create");
                var vm = ko.mapping.fromJS(options.data);
                vm.newObservable = ko.observable(true);
                return vm;
            }
        };

映射：

ko.mapping.fromJS(response, mappingOptions, self.nodes);

response 是对象（节点）的列表。 self.nodes 是保存对象（节点）列表的 observableArray()

每个节点都有 children-observalbeArray 也包含节点（有孩子） 所以没什么特别的，这基本上就是一棵树的工作原理:)

但这只会将这个新的 observable 添加到根节点。我希望在每个孩子和孩子的孩子（等等......）中也能有这种额外的可观察性。

我试过了：

var mappingOptions = {
    create: function (options) {
        console.log("create");
        var vm = ko.mapping.fromJS(options.data);
        vm.newObservable = ko.observable(true);
        return vm;
    },
    'children': {
        create: function (options) {
            console.log("children.create");
            options.data.newObservable = ko.observable(true);
            return ko.mapping.fromJS(options.data);                    
        }
    }
};

我在互联网的某个地方找到了这个。它不工作。

有人可以帮我吗？

谢谢！

P.S.：我不能提供一个小提琴，因为服务似乎已经坏了（或者我的防火墙阻止了它：（）

Answer 1

我会尝试创建一个数据模型。我们就叫它Node：

var Node = function Node(data) {
  this.parentID    = ko.observable( data.parentID );
  this.description = ko.observable( data.description );
  this.children    = ko.observableArray([]);

  data.children.forEach(function(child) {
    this.children.push( new Node(child) );
  }, this);
}

这使得在您希望的每个节点上创建任何其他属性变得容易。

在您的视图模型中：

var Viewmodel = function Viewmodel() {
  this.nodes = ko.observableArray([]);

  this.getResponse = function getResponse() {
    // response is loaded here

    response.forEach(function(node) {
      this.nodes.push( new Node(node) );
    }, this);
  };
}

请注意，我在这里使用的是原生 Array.prototype.forEach。如果需要支持 IE ko.utils.arrayForEach 代替。