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'));​ 

最後，這裏是我的分叉小提琴一個鏈接，你可以看看這個代碼的行動，以及以類似的方式工作的複選框的版本：

讓我知道如果你有問題。

UPDATE： http://jsfiddle.net/jimmym715/h2e9j/