knockout.js - 带有淘汰赛的 RadioButtonList

Question

我需要一个带有一堆类似于 CheckBoxList 的开/关选项的 RadioButtonList。我需要将它转换为每个选项的开/关，但 Knockout 将一组单选按钮解析为一个值。建议？

示例：http: //jsfiddle.net/DPnBE/2/

Answer 1

我做了一个自定义绑定。您可以通过将先前选择的项目存储在某处来摆脱 for 循环。然后你只需要选择和取消选择 2 个项目。

更新示例：http: //jsfiddle.net/DPnBE/5/

ko.bindingHandlers.radioCheck = {
    init: function(element, valueAccessor) {
        //initalize checked value of element
        element.checked = valueAccessor()();

        //attach event to handle changes
        $(element).change(function(e) {
            var item = ko.dataFor(element);
            var items = ko.contextFor(element).$parent.items;
            for (var i = 0; i < items.length; i++) {
                //set selected() for all items
                //true for the checked element, false for the rest
                items[i].selected(items[i] == item);                
            }
        });        
    }
};

Answer 2

我发现匹配单选按钮和复选框的最佳方法是将checked绑定设置为选定值的数组。

但是，要使其正常工作，每个单选按钮/复选框都需要一个值，然后该值与所选值数组中的值相匹配。

根据您的小提琴，我想出了以下 HTML：

<div id="two">
    <div data-bind="foreach: items">
        <label>
            <input name="items" 
                   type="radio" 
                   name="radioItems" 
                   data-bind="value: name, 
                              checked: $root.selectedItemNames" />
            <span data-bind="text:name"></span>
        </label><br/>
    </div><div data-bind="text: ko.toJSON($root)"></div>
</div>

这是使它工作的JavaScript：

var viewModel2 = {
    "items": [
        {
            "name": "one",
            "selected": ko.observable(false)
        },
        {
            "name": "two",
            "selected": ko.observable(true)
        },
        {
            "name": "three",
            "selected": ko.observable(false)
        }
    ]
};

viewModel2.selectedItemNames = ko.computed(function(){
    var selectedNames = [];
    ko.utils.arrayForEach(viewModel2.items, function(item) {
        if(item.selected()){
            selectedNames.push(item.name);
        }
    });
    return selectedNames;
});

ko.applyBindings(viewModel2, document.getElementById('two'));​

最后，这是我的分叉小提琴的链接，您可以在其中查看此代码的运行情况，以及以类似方式工作的复选框的重新设计版本：

如果您有任何问题，请告诉我。

更新：http: //jsfiddle.net/jimmym715/h2e9j/