被嵌套编辑器淘汰3级或更深层次

时间:2013-02-24 21:27:19

标签: knockout.js knockout-mvc

当尝试扩展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)
    })
    

    };

任何帮助表示感谢。

2 个答案:

答案 0 :(得分:1)

由于remove()函数需要可观察的数组,因此调用asservableArray

然后更改 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

的相同结构

答案 1 :(得分:1)

我修复了你的模型。将这段代码放在小提琴中,然后检查

完美无缺

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)
            };
        }))
    };
}));