javascript - 如何从 Knockout.js 的复选框列表中只选择一个复选框

Question

我有以下代码的 DOM 结构:

<tr>
    <td><label><input type="checkbox"></label></td>
</tr>
<tr>
    <td><label><input type="checkbox"></label></td>
</tr>
... etc

使用 knockout.js，当我选择一个单个 复选框时，我希望能够仅突出显示具有背景色的父行。现在，我设法实现的代码选择所有 复选框并突出显示所有 行，如图所示here in this fiddle .

值得注意的是，我拥有的行数是动态的并且可能非常大，因此需要一个可扩展的解决方案。我已经尝试理解 observableArrays 的概念我不会走得太远。

如何使用 Knockout 实现上述逻辑？谢谢。

Answer 1

使用 observableArray ( fiddle link ) 查看此解决方案:

1. 我创建了一个constructor Checkbox 方法来创建checkboxes 项。
2. 请注意，每个复选框都有一个observable 来检测项目何时被选中。
3. 我还有一个 observableArray，里面装满了复选框对象。
4. 然后我只需要一个 foreach binding 来呈现我在数组中的所有复选框。
5. 在 foreach 绑定(bind)中我添加了几个绑定(bind)来显示标签，检测复选框被选中并在被选中时突出显示它。

HTML

<div data-bind="foreach: checkboxes">
    <div data-bind="css: {'selected': isSelected}">
        <label>
            <input type="checkbox" data-bind="checked: isSelected"/>
            <span data-bind="text: label"></span>
        </label>
    </div>    
</div>

CSS

.selected {
    background-color: yellow;
}

JS

var Checkbox = function(label){
    this.isSelected = ko.observable(false);
    this.label = label;
};

var checkboxes = [new Checkbox('Item 1'), new Checkbox('Item 2'), new Checkbox('Item 3')];

ko.applyBindings({
    checkboxes: ko.observableArray(checkboxes)
})

它是如此的可扩展，因为你只需要添加一个 new Checkbox() 到 observableArray。