问题

我们正在尝试使用以下功能实现复选框和列表:

  • 单击该复选框将清除阵列中是否有项目,否则添加新项目.
  • 在单击删除按钮时从数组中删除项目,一旦删除最后一个项目,该复选框将自动取消选中.

我遇到的问题是,如果您单击删除每个数组项,然后单击该复选框添加一个空白条目,我期待复选框再次被检查(根据检查的可观察),但它是不?

我有以下代码:

http://jsfiddle.net/UBsW5/3/

    <div>
        <input type="checkbox" data-bind="checked: PreviousSurnames().length > 0, click: $root.PreviousSurnames_Click" />Previous Surname(s)?
    </div>
    <div data-bind="foreach: PreviousSurnames">
        <div>
            <input type="text" data-bind="value: $data">
            <span data-bind="click: $root.removePreviousSurname">Remove</span>
        </div> 
    </div>


var myViewModelExample = function () {
    var self = this;

    self.PreviousSurnames = ko.observableArray(['SURNAME1', 'SURNAME2', 'SURNAME3']);

    self.removePreviousSurname = function (surname) {
        self.PreviousSurnames.remove(surname);
    };

    self.PreviousSurnames_Click = function () {
        if (self.PreviousSurnames().length === 0) {
            self.PreviousSurnames.push('');
        }
        else {
            self.PreviousSurnames.removeAll();
        }
        alet(2)
    }

}

ko.applyBindings(new myViewModelExample());


解决方法

您需要使用计算来监视observable数组的长度.这样当长度达到零时,您可以自动对其进行反应.

    self.surnames = ko.computed(function() {
        var checked = true;
        if (self.PreviousSurnames().length === 0) {
            self.PreviousSurnames.push('');
            checked = false;
        }            
        return checked;
    });

现在,当所有名称被清除时,您将拥有空白的文本框.如果您在复选框上更新您的绑定,它也将正常工作.

<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?

FIDDLE




相关问题推荐