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 binding会将输入的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。

使用knockout js的动态单选按钮行为

1 个答案: