动态构建挖空模型和视图，未设置单选按钮 [英] Build knockout model and view dynamically, radio buttons not being set

问题描述

我正在制作 我以前的问题 完全动态，因为模型是根据服务器数据构建的，并且视图通过视图模型通过淘汰赛循环 ko foreach 功能。

我面临的问题是：

1. 无线电选项不会保留值集，即我单击操作系统，然后选择数据库选项，然后操作系统设置消失。

1. The radio options don't stay with the value set, i.e. I click on the Operating System, and then select a Database option, and then the Operating System setting disappears.

从属选项（在本例中为数据库和群集）在从属选项更改时没有选择其初始选择（即当OS更改时，DB应返回到第一个选项，无）。

The dependent options (in this case database and clustering) do not have their initial selection selected when the dependent option changes (i.e. when OS changes, DB should go back to the first option, none).

我的小提琴在这里 ，我认为问题与以下代码有关：

My fiddle is here and i think the problem is either related to the code below:

 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会话中受伤而感到新的眼睛。

I am not sure which and would appreciate a fresh eyes as my brain hurts from the jsfiddle session.

推荐答案

你有两个问题：

• 您没有正确绑定单选按钮的名称： name =$ parent.name不是敲除绑定表达式，它只是指定字符串<$ c所有单选按钮的$ c>$ parent.name。你需要的是使用 attr 绑定：

• You are not correctly binding your radio button's names: name="$parent.name" is not a knockout binding expression and it just assigns the string "$parent.name" to all of your radio buttons. What you need is to use the attr binding:

<input type="radio" data-bind="checkedValue: $data, 
                               checked: $parent.selection, 
                               attr: { name: $parent.name }" />

初始选择无效，因为您使用的是 checkedValue ：$ data 选项这意味着您的选中应该包含整个对象，而不仅仅是一个属性（ sku ）所以你需要将 computedOptions.subscribe 更改为：

The initial selection is not working because you are using the checkedValue: $dataoption this means that your checked should contain the whole object and not just one property (sku) so you need to change your computedOptions.subscribe to:

computedOptions.subscribe(function () {
    var section = this; 
    section.selection(section.options()[0]);
},section);

演示 JSFiddle 。

这篇关于动态构建挖空模型和视图，未设置单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！