如何從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)
})

它是如此可擴展，因為您只需要向observableArray添加一個new Checkbox() 。