如何将数组渲染为单选按钮列表？

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());

我通过在我的javascript中生成所有html并使用复选框来完成此工作,但是使用foreach迭代器生成一组radiobutton是难过的.

有没有人得到像我第一个工作的例子？

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());

<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 2

您的代码给出了此错误：

消息：ReferenceError：所选未定义；

绑定值：勾选：已选择

您在视图模型级别上定义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.selectedselected将在视图模型级别查找属性。

这是修改后的代码。

有关伪变量（如$root）的更多信息，请参阅3. 访问父绑定上下文。