javascript - 从嵌套数据结构中删除元素

Question

我目前正在使用 Knockout.js 框架。我发现实现起来很容易而且很棒。我正在制作一个联系人表单，类似于 knockoutjs.com 上显示的示例。该表单由多个可以动态添加或删除的字段组成。这就是我遇到困难的地方:如果表单中剩下的联系人字段少于 2 个，我将尝试禁用 delete 按钮。然而，这会导致问题并使表单无法正确呈现并禁用删除功能。这是完整的代码:JSFIDDLE

knockout.js

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

    self.addContact = function() {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phones: ko.observableArray()
        });
    };

    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };

    self.addPhone = function(contact) {
        contact.phones.push({
            type: "",
            number: ""
        });
    };

    self.removePhone = function(phone) {
        $.each(self.contacts(), function() { this.phones.remove(phone) })
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new ContactsModel(initialData));

HTML

 <div><a href='#' data-bind='click: $root.removeContact, enable: contacts().length < 2'>Delete</a></div>

Answer 1

首先你的绑定(bind)是错误的，应该enable: $root.contacts().length > 2,

其次，enable 绑定(bind)不适用于 anchor 标记，它仅适用于输入、选择和文本区域。

请考虑隐藏它或在您的 removeContact 实现中添加条件。

http://jsfiddle.net/gZC5k/2284/

<div data-bind="if: $root.contacts().length > 2">
  <a href='#' data-bind='click: $root.removeContact'>Delete</a>
</div>