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

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, и у меня это работает, используя флажки, но я поставил в тупик создание группы радиокнопок с использованием итератора foreach.

Кто-нибудь получил пример, подобный моему первому сработавшему?

Answer 1

Вот один из способов сделать это. Обратите внимание, что привязка 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());

Fruits

  
    
    
 

Selected value:

Answer 2

Чтобы иметь возможность иметь весь объект, лучше использовать selectedValue, а не attr: {value}, вот так:

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>

Answer 3

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

Сообщение: ReferenceError: selected не определено;

Значение привязок: проверено: selected

Youопределен 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 на уровне модели представления.

ЗДЕСЬ - измененный код.

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

Answer 4

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