динамического поведения кнопки радио с нокаутом 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> 

когда радио кнопка создаются каждый из них присваивается уникальный индекс, и я связал проверяемый атрибут к свойство на родительском имени selectedradio

Я могу изменить selectedradio, хотя вход html и выбранная радиостанция изменится, но если я изменю значение прогмамально, это не будет.

Я создал скрипку здесь: 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 использовать другое свойство в качестве значения CheckBox в с checkedValue вариант:

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

В этом случае вам не нужно, чтобы изменить ваш moveUp и moveDown, потому что теперь selectedradio всегда будет содержать целые числа, потому что ваше текстовое поле по-прежнему задает selectedradio, чтобы оно больше не работало.

Демо-версия JSFiddle.