使用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());

我该如何解决这个问题？

- andrew

Answer 1

在单选按钮的情况下，默认情况下，checked绑定会将输入框的value属性（它是一个字符串）与模型属性进行比较。

因此，您需要在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。

- nemesv

---

谢谢，我并不是真的关心文本输入，它只是用来帮助解释情境的。 - andrew