Question

'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。这看起来有点臭，有没有更好的方法来知道谁是选定的收音机？

Answer 1

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

使这项工作变得简单的一种简单方法是让它在父项上填充一个值，然后在每个项目上添加一个计算的observable，以确定其所选标志是真还是假。

以下是一个示例：

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/

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

1 个答案: