如何将数组呈现为单选按钮列表?
我想循环遍历我在 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 迭代器生成一组单选按钮。
有人得到像我第一个工作的例子吗?
I would like to loop through an array that I define in my Javascript and render a list of radio buttons. My code which isn't working currently, and it is as follows (also on 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());
If my array is part of the html then it works fine, see this (or 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());
I got this to work by generating the all of the html within my javascript and have this working using checkboxes, but am stumped generating a group of radiobuttons using the foreach iterator.
Has anyone gotten an example like my first one to work?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
这是执行此操作的一种方法。请注意,
attr
绑定应位于checked
绑定之前。Here's one way to do this. Note that the
attr
binding should come before thechecked
binding.您的代码给出了此错误:
您在视图模型级别定义了
selected
,但您在foreach
内引用它,因此 Knockout.js 正在选项级别查找它。更改
为:
$root.selected
将在视图模型级别查找selected
属性。这里是修改后的代码。
有关伪变量(例如
$root
)的更多信息,请参阅 3.访问父绑定上下文。Your code is giving this error:
You defined
selected
on the view model level, but you are referencing it insideforeach
so Knockout.js is looking for it on the options level.Change:
to:
$root.selected
will look for theselected
property on the view model level.HERE is the modified code.
For more information about pseudo-variables (like
$root
) see 3. Access to parent binding contexts.为了能够拥有整个对象,最好使用 checkValue 而不是 attr: {value} ,如下所示:
To be able to have the entire object it's better to use checkedValue instead of attr: {value} like that :
你的代码是有效的。只需在 jsfiddle 中包含 Knockout.js 并设置文档“onDomready”即可。
You code is works. Just include knockout.js in your jsfiddle and set document "onDomready".