如何从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,当我选择一个单选框,我希望能够突显只与背景色父行.现在,我设法实现的代码选择所有复选框并突出显示所有行,如此小提琴中所示.

值得注意的是,我拥有的行数是动态的,可能非常大,因此需要一个可扩展的解决方案.我已经尝试了解observableArrays的概念,但我并没有走得太远.

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

Answer 1

使用observableArray(小提琴链接)查看此解决方案:

1. 我创建了一个构造函数 Checkbox方法来创建复选框项.
2. 请注意,每个复选框都有一个observable来检测何时选择该项.
3. 我还有一个observableArray填充复选框对象.
4. 然后我只需要一个foreach 绑定来渲染我在数组中的所有复选框.
5. 里面foreach绑定我添加几个结合,以显示标签,以检测当复选框被选中,并强调如果它被选中.

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.