Knockout js 使用 foreach 控制流和 radion 作为模板

发布于 2024-12-29 19:22:43 字数 495 浏览 0 评论 0原文

“checked”绑定与 foreach 控制流生成的单选按钮不太兼容。

示例：

 <div data-bind="foreach: targetAudience">
        <div>
            <label>
                <input name="targetAudience" type="radio"  data-bind="checked:    isSelected,value:id" />
                <span data-bind="text: name"></span>
            </label>
        </div>
    </div>

每个 vm（单个目标）将在 isSelected 属性中获取所选无线电的 id。这看起来有点臭，有没有更好的方法来知道谁是选定的电台？

原文

The 'checked' binding is not very compatible for radio button that generated by a foreach control flow.

example:

 <div data-bind="foreach: targetAudience">
        <div>
            <label>
                <input name="targetAudience" type="radio"  data-bind="checked:    isSelected,value:id" />
                <span data-bind="text: name"></span>
            </label>
        </div>
    </div>

each vm(single target) will get the id of the selected radio at the isSelected property.
This looks a little smelly, is there a better way to know who is the selected radio?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

困倦 2025-01-05 19:22:43

使用单选按钮时的“检查”绑定旨在使用单个单选按钮的“值”填充模型，而不是更新数组中每个项目的标志。

不过，实现此目的的一个简单方法是让它在父项上填充一个值，然后在每个项目上添加一个计算的可观察值，以确定其选定的标志应该是 true 还是 false。

这是一个示例：

var Item = function(id, name, selected) {
   this.id = id;
   this.name = ko.observable(name);
   this.selected = ko.computed(function() {
        return parseInt(selected(), 10) == this.id;  
   }, this);
};

var ViewModel = function() {
    this.selected = ko.observable(2);
    this.items = ko.observableArray([
        new Item(1, "one", this.selected),
        new Item(2, "two", this.selected),
        new Item(3, "three", this.selected)
       ]);
};

然后，绑定如下：

<ul data-bind="foreach: items">
    <li>
        <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
        <span data-bind="text: name"></span>
    </li>
</ul>

http://jsfiddle.net/rniemeyer/zNkhR/

The 'checked' binding when working with radio buttons is designed to populate the model with the "value" of the individual radio button rather than update a flag on each item in an array.

An easy way to make this work though is to have it populate a value on the parent and then add a computed observable on each item to determine whether its selected flag should be true or false.

Here is a sample:

var Item = function(id, name, selected) {
   this.id = id;
   this.name = ko.observable(name);
   this.selected = ko.computed(function() {
        return parseInt(selected(), 10) == this.id;  
   }, this);
};

var ViewModel = function() {
    this.selected = ko.observable(2);
    this.items = ko.observableArray([
        new Item(1, "one", this.selected),
        new Item(2, "two", this.selected),
        new Item(3, "three", this.selected)
       ]);
};

Then, bind like:

<ul data-bind="foreach: items">
    <li>
        <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
        <span data-bind="text: name"></span>
    </li>
</ul>

http://jsfiddle.net/rniemeyer/zNkhR/

回复收藏 0 原文

~没有更多了~