knockout.js - 被嵌套编辑器击倒 3 级或更多级别

Question

在尝试扩展 KO 站点 ( http://jsfiddle.net/rniemeyer/gZC5k/ ) 上提供的嵌套编辑器的实时示例以更改布局并添加更深层次时，我无法解决两个问题。

虽然我能够到达这个阶段http://jsfiddle.net/gZC5k/955/

在模型中建立正确的层次结构时，我陷入了困境，

    var ContactsModel = function (contacts) {
var self = this;
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
    return {
        firstName: contact.firstName,
        lastName: contact.lastName,
        phones: ko.observableArray(contact.phones),
        addresses: ko.observableArray(contact.addresses)
    };
}));

这两个问题是：

• 无法向初始数据集中加载的“电话”添加新的“呼叫”（当我创建新电话时，我可以添加“呼叫”）

• 无法删除“通话”。

  self.removeCall = function (call) {
  $.each(self.phones(), function () {
      this.calls.remove(call)
  })
  

  };

任何帮助表示赞赏。

Answer 1

由于 remove() 函数需要可观察数组，因此调用 observableArray

然后改变removeCall方法如下

self.removeCall = function (call) {
      alert(ko.toJSON(call));
     $.each(self.contacts(), function () {
        $.each(this.phones(), function () {
            alert(ko.toJSON(this));
        this.calls.remove(call)
    })
    })
}; 

对于addCall方法，遵循与removeCall相同的结构

Answer 2

我已经修复了你的模型。用小提琴替换这个代码，然后检查

它完美无缺

self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
    return {
        firstName: contact.firstName,
        lastName: contact.lastName,
        addresses: ko.observableArray(contact.addresses),
        phones: ko.observableArray(ko.utils.arrayMap(contact.phones, function (phone) {
            return{
                type: phone.type,
                number: phone.number,
                calls: ko.observableArray(phone.calls)
            };
        }))
    };
}));