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

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

其次，enable绑定不适用于anchor标记，它仅适用于input，select和textarea。

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

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

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

Answer 2

JSFiddle不适合我，但是，如果我理解正确，删除链接没有被正确禁用。

我注意到你的HTML中有这个：

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

如果您有一个或多个项目，这仍然允许启用链接。如果你希望它在你有1个或更少时禁用，你需要它是这样的：

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

如果这不能回答你的问题，请告诉我。

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

2 个答案: