选中 Knockout.js 复选框并单击事件答案

【问题标题】：Knockout.js Checkbox checked and click event选中 Knockout.js 复选框并单击事件
【发布时间】：2014-02-26 20:32:10
【问题描述】：

我们正在尝试实现具有以下功能的复选框和列表：

如果有项目，单击复选框将清除数组，如果没有，则添加新项目。
单击“删除”按钮时从数组中删除一项，一旦删除最后一项，复选框会自动取消选中。

我遇到的问题是，如果您单击删除每个数组项，然后单击复选框以添加一个空白条目，我希望再次选中该复选框（根据选中的 observable），但是它是不是吗？

我有以下代码：

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

【问题讨论】：

标签： checkbox knockout.js

【解决方案1】：

如果您同时使用click 和checked，那么您需要将点击处理程序中的return true 设置为allow the browser default click action，在这种情况下选中复选框：

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

演示JSFiddle.

【讨论】：

【解决方案2】：

您需要使用计算来监视可观察数组的长度。这样，当长度达到零时，您可以自动对其做出反应。

    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

【讨论】：

计算的意义何在？在您的示例中，代码在计算和 PreviousSurnames_Click 中重复，您还需要在最新编辑中添加 return true; 以使复选框“工作”？
计算的重点是在数组中没有剩余项目时自动做出反应。代码是重复的，因为它是一个小提琴。这个例子的重构是一个简单的过程。但是，我对其进行了更新以删除重复的代码。在您的示例中，当所有项目都被清除时，文本框不会出现。