с помощью радио-кнопки с knockoutjs

Question

Обычно я могу использовать переключатель в knockoutjs, как показано ниже:

<input type="radio" value=1 data-bind="checked: groupvalue" /><span data-bind="text: 1"></span 

Но что, если бы я хотел, чтобы получить значения динамически из массива ..

Следующая не работа ..

<tbody data-bind="foreach: colors"> 
         <tr><td><input type="radio" data-bind="checkedValue:$data, checked: groupvalue" /><span data-bind="text: $data"></span></td></tr> 
     </tbody> 

где цвета является:

self.colors = ko.observableArray([ 
         'Red', 
         'Green', 
         'Blue', 
         'Brown', 
         'Yellow', 
         'White', 
         'Black' 
        ]); 

Я видел this, но я надеюсь на простой ответ.

Любая помощь искренне расстроена.

Благодаря

Answer 1

Я думаю, что ваша единственная проблема в том, что groupvalue не определен в модели, которая в настоящее время итерации, так что если вы посмотрите на консоли вы увидите сообщение об ошибке:

Unable to process binding "foreach: function(){return colors }" Message: Unable to process binding "checked: function(){return groupvalue }" Message: groupvalue is not defined

И это останавливает работу javascript. Изменение, что связывание с чем-то (предположительно как $root.groupvalue), и она работает просто отлично

<tbody data-bind="foreach: colors"> 
    <tr><td><input type="radio" data-bind="checkedValue:$data, checked: $root.groupvalue" /> 
      <span data-bind="text: $data"></span></td></tr> 

Живой пример: http://jsfiddle.net/4h5bkw8t/

Answer 2

Вы должны выйти из foreach контекста с использованием $parent, чтобы добраться до groupvalue

<tbody data-bind="foreach: colors"> 
    <tr> 
    <td> 
     <input type="radio" data-bind="checkedValue:$data, checked: $parent.groupvalue" /><span data-bind="text: $data"></span> 
    </td> 
    </tr> 
</tbody> 

Адрес Plunkr