Выберите первую радио кнопку Нокаут JS

Question

Рассмотрим следующий пример:

self.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: '4', selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]); 
self.amountSelected = ko.observableArray(); 

Если я:

<div data-bind="foreach: container"> 
    <div data-bind="foreach: amount"> 
    <input type="radio" name="radio-selection-name" data-bind="attr: {value: key}, checked: $root.amountSelected()[$index()] || selected" /> 
    </div> 
</div> 

Это работает, что не работает это уведомление, как один из сумм он выбран в качестве у него есть '1'

Как сказать, выбрать текущий элемент или использовать выделенный объект для этого объекта?

Есть ли способ установить для этого индекса радиоприемник, если выбранный атрибут на объекте является «1»?

Answer 1

Вы не можете выбрать более одной радиостанции, поэтому привязка checked не должна быть observableArray для радиоприемников. Лучший способ установить значение ввода - это привязка checkedValue, в фрагменте есть пример того и другого, но см. Документацию Checked binding KO, это очень полезно.

function ViewModel(){ 
 
    this.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: 4, selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]); 
 
    
 
    this.amountSelectedRadio = ko.observable(2); 
 
    this.amountSelectedChecked = ko.observableArray([8,4]); 
 
    
 
} 
 

 

 
ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<h2>Checked Binding: Radio</h2> 
 
<div data-bind="foreach: container"> 
 
    <div data-bind="foreach: amount"> 
 
    <input type="radio" name="radio-selection-name" data-bind="checked: $root.amountSelectedRadio, checkedValue: key" /> 
 
    </div> 
 
</div> 
 

 
<h2>Checked Binding: CheckBox</h2> 
 

 
<div data-bind="foreach: container"> 
 
    <div data-bind="foreach: amount"> 
 
    <input type="checkbox" name="checkbox-selection-name" data-bind="checked: $root.amountSelectedChecked, checkedValue: key" /> 
 
    </div> 
 
</div>