动态构建淘汰模型和视图，未设置单选按钮答案

【问题标题】：Build knockout model and view dynamically, radio buttons not being set动态构建淘汰模型和视图，未设置单选按钮
【发布时间】：2013-12-11 03:02:16
【问题描述】：

我正在使 my previous questions 之一完全动态化，因为该模型是从服务器数据构建的，并且视图通过敲除 ko foreach 功能在视图模型中循环。

我面临的问题是：

单选选项不保留设置的值，即我单击操作系统，然后选择数据库选项，然后操作系统设置消失。
当从属选项更改时（即当操作系统更改时，数据库应返回第一个选项，无）时，未选择从属选项（在本例中为数据库和集群）的初始选择。

My fiddle is here 我认为问题与以下代码有关：

 computedOptions.subscribe(function () {
                    var section = this;
                    console.log("my object: %o", section);   
                    section.selection(section.options()[0].sku);
                },section);

或者我的视图绑定：

<!-- ko foreach: selectedOptions -->
    <h3><span data-bind="text: description"></span></h3>
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th colspan="2" style="text-align: left;">Description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: options -->
            <tr>
                <td><input type="radio" name="$parent.name" data-bind="checkedValue: $data, checked: $parent.selection" /></td>
                <td style="text-align: left;"><span data-bind="text: name"></span></td>
                <td style="text-align: left;"><span data-bind="text: price"></span></td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>
<!-- /ko -->

我不确定是哪一个，我会很高兴看到新的眼睛，因为我的大脑因 jsfiddle 会话而受伤。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

你有两个问题：

您没有正确绑定单选按钮的名称：name="$parent.name" 不是淘汰绑定表达式，它只是将字符串 "$parent.name" 分配给所有单选按钮。您需要的是使用attr 绑定：
```
<input type="radio" data-bind="checkedValue: $data, 
                               checked: $parent.selection, 
                               attr: { name: $parent.name }" />
```
初始选择不起作用，因为您使用的是 checkedValue: $data选项，这意味着您的 checked 应该包含 整个对象 而不仅仅是一个属性 (sku)，因此您需要将您的 computedOptions.subscribe 更改为：
```
computedOptions.subscribe(function () {
    var section = this; 
    section.selection(section.options()[0]);
},section);
```

演示JSFiddle.

【讨论】：