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

发布于 2024-12-28 01:07:09 字数 1914 浏览 1 评论 0原文

我想循环遍历我在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

筑梦 2025-01-04 01:07:09

这是执行此操作的一种方法。请注意,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>

Here's one way to do this. Note that the attr binding should come before the checked binding.

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>

简单气质女生网名 2025-01-04 01:07:09

您的代码给出了此错误:

消息: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.selected 将在视图模型级别查找 selected 属性。

这里是修改后的代码。

有关伪变量(例如 $root)的更多信息,请参阅 3.访问父绑定上下文

Your code is giving this error:

Message: ReferenceError: selected is not defined;

Bindings value: checked: selected

You defined selected on the view model level, but you are referencing it inside foreach so Knockout.js is looking for it on the options level.

Change:

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

to:

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

$root.selected will look for the selected 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.

鸢与 2025-01-04 01:07:09

为了能够拥有整个对象,最好使用 checkValue 而不是 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>

To be able to have the entire object it's better to use checkedValue instead of attr: {value} like that :

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>
爱的十字路口 2025-01-04 01:07:09

你的代码是有效的。只需在 jsfiddle 中包含 Knockout.js 并设置文档“onDomready”即可。

You code is works. Just include knockout.js in your jsfiddle and set document "onDomready".

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文