Как отобразить массив как список переключателей?

Question

Я хотел бы пропустить массив, который я определяю в своем Javascript, и отображать список переключателей. Мой код, который не работает в настоящее время, и это выглядит следующим образом (в том числе на jsfiddle):

<div data-bind="foreach: options" > 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="checked: selected" /> 
     <span data-bind="text: label"></span> 
    </div>  
</div> 

var optionsList = [ 
    {"value": "a","label": "apple"}, 
    {"value": "b","label": "banana"}, 
    {"value": "c","label": "carrot"} 
]; 
function viewModel() { 
    var self = this; 
    self.options = optionsList; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
} 
ko.applyBindings(new viewModel()); 

Если мой массив является частью HTML, то он работает отлично, увидеть это (или jsfiddle):

<div> 
    <input type="radio" name="optionsGroup" value="a" data-bind="checked: selected"  />Apple 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="b" data-bind="checked: selected" />Banana 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="c" data-bind="checked: selected" />Carrot 
</div> 
<div data-bind="text: selected"> 
</div> 

function viewModel() { 
    var self = this; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
}  
ko.applyBindings(new viewModel()); 

я получил эту работу, генерируя все HTML в моем JavaScript и иметь это работает с помощью флажков, но я озадачен генерируя группу радиокнопок с помощью Еогеаспа iterato р.

Неужели кто-нибудь получил пример, как мой первый, чтобы работать?

Answer 1

Ваш код дает эту ошибку:

Message: ReferenceError: selected is not defined;

Bindings value: checked: selected

Вы определили selected на уровне вид модели, но вы ссылаетесь его внутри foreach так Knockout.js ищет его на уровне параметров.

Изменение:

<div><input type="radio" name="optionsGroup" data-bind="checked: selected" /> 

к:

<div><input type="radio" name="optionsGroup" data-bind="checked: $root.selected" /> 

$root.selected будет искать selected собственности на уровне зрения модели.

HERE - модифицированный код.

Для получения дополнительной информации о псевдопеременных (например, $root) см. 3. Access to parent binding contexts.

Answer 2

Вот один из способов сделать это. Обратите внимание, что привязка attr должна предшествовать связыванию checked.

var optionsList = [ 
 
    {"value": "a", "label": "apple"}, 
 
    {"value": "b", "label": "banana"}, 
 
    {"value": "c", "label": "carrot"} 
 
]; 
 

 
function viewModel() { 
 
    this.options = optionsList; 
 
    this.selected = ko.observable("a"); 
 
} 
 

 
ko.applyBindings(new viewModel());

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

 
<h3>Fruits</h3> 
 
<div data-bind="foreach: options" > 
 
    <label> 
 
    <input type="radio" 
 
      name="optionsGroup" 
 
      data-bind="attr: {value: value}, checked: $root.selected" /> 
 
    <span data-bind="text: label"></span> 
 
    </label>  
 
</div> 
 

 
<h3>Selected value:</h3> 
 
<pre data-bind="text: ko.toJSON($root.selected)"></pre>

Answer 3

Вы код работает. Просто включите knockout.js в вашем jsfiddle и установить документ «onDomready»: http://screencast.com/t/DmTSgCoEUsxC

Answer 4

Чтобы быть в состоянии иметь весь объект, что лучше использовать CheckedValue вместо ATTR: {значение} так:

Fruits 
<div data-bind="foreach: options" > 
    <div><input type="radio" name="optionsGroup" data-bind="checkedValue: $data, checked: $root.selected" /> 
    <span data-bind="text: label"></span></div>  
</div>