Arrays 如何将数组呈现为单选按钮列表？

我想循环遍历Javascript中定义的数组，并呈现单选按钮列表。我的代码当前不起作用，如下所示（也在上）：

var选项列表=[
{“value”：“a”，“label”：“apple”}，
{“值”：“b”，“标签”：“香蕉”}，
{“值”：“c”，“标签”：“胡萝卜”}
];
函数viewModel（）{
var self=这个；
self.options=选项列表；
自我选择=可观察（“a”）；
self.selected.subscribe（函数（newValue））{
警报（“新值为”+新值）；
});
}
应用绑定（新的viewModel（））；

如果我的数组是html的一部分，那么它可以正常工作，请参见以下（或）：

苹果
香蕉
胡萝卜

函数viewModel（）{
var self=这个；
自我选择=可观察（“a”）；
self.selected.subscribe（函数（newValue））{
警报（“新值为”+新值）；
});
}    
应用绑定（新的viewModel（））；

我通过在javascript中生成所有html实现了这一点，并使用复选框实现了这一点，但我很难使用foreach迭代器生成一组单选按钮

---

有人得到过像我的第一个这样的例子吗？

您的代码给出了以下错误：

消息：ReferenceError:未定义所选内容

绑定值：选中：选中

您在视图模型级别上定义了

selected

，但在

foreach

中引用了它，因此Knockout.js在选项级别上查找它

更改：

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

致：

$root.selected

将在视图模型级别上查找

selected

属性

是修改后的代码

---

有关伪变量（如

$root

）的更多信息，请参阅。

这里有一种方法。请注意，

attr

绑定应该在选中的

绑定之前


var选项列表=[
{“value”：“a”，“label”：“apple”}，
{“值”：“b”，“标签”：“香蕉”}，
{“值”：“c”，“标签”：“胡萝卜”}
];
函数viewModel（）{
this.options=选项列表；
此项选择=可观察到（“a”）；
}
应用绑定（新的viewModel（））

水果
选定值：
您的代码是有效的。只需在JSFIDLE中包含knockout.js并设置文档“onDomready”。
为了能够拥有整个对象，最好使用checkedValue而不是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>

水果
当然，您可以想出一个信息更丰富的标题。值得注意的是，您不需要在viewModel中使用
var self=this
。删除该行并将所有
self
s更改为
this
。范围没有问题。我的问题是
attr
绑定在检查之前没有出现。有道理，但不明显的马上。在最近的淘汰版本中，$root已经变成了$parent
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>