javascript - 带有 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 属性绑定(bind)到名为 selectedradio 的父属性上

我可以通过 html 输入修改 selectedradio，并且所选的 radio 会改变，但如果我以编程方式修改值，则不会。

我在这里创建了一个 fiddle :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 binding默认情况下将输入的 value 属性(一个字符串)与模型属性进行比较。

所以你需要在你的selectedradio中存储strings:

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 .

或者您可以更改默认行为，您可以通过 checkedValue 选项告诉 KO 使用不同的属性作为复选框的值:

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

在这种情况下，您不需要更改moveUp 和moveDown 方法，因为现在selectedradio 将始终包含整数，但是因为您文本框仍然将 selectedradio 设置为字符串，它不再起作用。

演示 JSFiddle .