使用knockout js的動態單選按鈕行為

Question

我有一個按鈕來創建這樣的單選按鈕：

<input value="&uparrow;" type="button" data-bind=" click: moveUp"/>
<input value="&downarrow;" type="button" data-bind="click: moveDown"/>
<input data-bind="value: selectedradio" />
<div data-bind="foreach: radios">
    <div data-bind="attr:{id:radioid} ">
       <input type="radio" name="group" data-bind="value:radioid, checked:$parent.selectedradio"/>
     </div>
</div>
<div>
     <input type="button" value="+" data-bind="click: addRadio"/>
</div>

當創建單選按鈕時，它們每個都被分配了一個唯一索引，並且我已將checked屬性綁定到名為selectedradio的父項上的屬性

我能夠通過html輸入修改selectedradio ，並且所選的收音機將會改變，但如果我以編程方式修改它，則不會。

我在這里創造了一個小提琴： http ： //jsfiddle.net/8vVeU/

這里是javascript供參考：

function Radio(id){
    this.radioid = ko.observable(id);
}

 function ViewModel() {
        var self = this;
        self.selectedradio = ko.observable(0);
        self.radios = ko.observableArray([new Radio(0),new Radio(1),new Radio(2),new Radio(3)]);

        self.addRadio = function() {
            self.radios.push(new Radio());
            self.reIndex();
         };
         self.moveUp = function() {
            self.selectedradio(self.selectedradio()-1)
            self.reIndex();
          };
        self.moveDown = function() {
            self.selectedradio(self.selectedradio()+1)
            self.reIndex();
          };

        self.reIndex = function() {
            $.each(self.radios(), function(i, r) {
                r.radioid(i);             
          });
        }


}
ko.applyBindings(new ViewModel());

我該如何解決這個問題？

Answer 1

對於單選按鈕，默認情況下， checked綁定會將輸入的value屬性（即字符串）與model屬性進行比較。

所以你需要在selectedradio存儲字符串 ：

self.moveUp = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())-1).toString())
    self.reIndex();
};
self.moveDown = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())+1).toString())
    self.reIndex();
};

它適用於文本框，因為它將使用輸入的字符串填充selectedradio 。

演示JSFiddle 。

或者你可以改變默認的行為，你可以告訴KO使用不同的屬性作為復選框與價值checkedValue選項：

<input type="radio" name="group" data-bind="value:radioid, 
       checked:$parent.selectedradio, checkedValue: radioid"/>

在這種情況下，您不需要更改moveUp和moveDown方法，因為現在selectedradio將始終包含整數，但是因為您的文本框仍然將selectedradio設置為字符串，它將不再起作用。

演示JSFiddle 。