带Knockout的RadioButtonList

Question

我需要一个RadioButtonList，其中包含一些类似于CheckBoxList的开/关选项。我需要它转换为每个选项的开/关，但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/