Построить модель нокаута и вид динамически, радио-кнопка не установлена ​​

Question

Я нахожусь в процессе создания одного из my previous questions полностью динамических в том, что модель построена на основе данных сервера, и вид петли через ViewModel с помощью нокаута ko foreach функциональность.

Проблемы я столкнулся являются:

1. радио варианты не остаются с набором значений, то есть я нажимаю на операционной системе, а затем выберите вариант базы данных, а затем операционная система настройка исчезает.

2. Зависимые параметры (в данном случае базы данных и кластеризации) не имеют своего первоначального выбора, выбранного при изменении зависимой опции (то есть, когда ОС изменяется, БД должна вернуться к первому варианту, никому).

My fiddle is here и я думаю, что проблема либо связана с ниже код:

computedOptions.subscribe(function() { 
        var section = this; 
        console.log("my object: %o", section); 
        section.selection(section.options()[0].sku); 
       },section); 

Или мой взгляд привязок:

<!-- ko foreach: selectedOptions --> 
    <h3><span data-bind="text: description"></span></h3> 
    <table class="table table-striped table-condensed"> 
     <thead> 
      <tr> 
       <th colspan="2" style="text-align: left;">Description</th> 
       <th>Price</th> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- ko foreach: options --> 
      <tr> 
       <td><input type="radio" name="$parent.name" data-bind="checkedValue: $data, checked: $parent.selection" /></td> 
       <td style="text-align: left;"><span data-bind="text: name"></span></td> 
       <td style="text-align: left;"><span data-bind="text: price"></span></td> 
      </tr> 
      <!-- /ko --> 
     </tbody> 
    </table> 
<!-- /ko --> 

Я не уверен, и был бы признателен свежие глаза, когда мой мозг болит с сессии jsfiddle.

Answer 1

У вас есть две проблемы:

• Вы не правильно связывания имен вашей кнопки радиостанции: name="$parent.name" не является обязательным выражением нокаута, и он просто присваивает строку "$parent.name" все ваши радио-кнопок. Что вам нужно использовать attr связывания:

  <input type="radio" data-bind="checkedValue: $data, 
             checked: $parent.selection, 
             attr: { name: $parent.name }" /> 
  

• Первоначальный отбор не работает, потому что вы используете checkedValue: $data вариант это означает, что ваш checked должен содержать весь объект, а не только одно свойство (sku), так что вы должны изменить ваш computedOptions.subscribe на:

  computedOptions.subscribe(function() { 
      var section = this; 
      section.selection(section.options()[0]); 
  },section); 
  

Demo JSFiddle.