knockout.js - ノックアウト付き RadioButtonList

Question

CheckBoxList に似たオン/オフの選択肢がたくさんある RadioButtonList が必要です。各オプションのオン/オフに変換する必要がありますが、Knockout はラジオ ボタンのグループを 1 つの値に解決します。提案？

例: 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/