构建淘汰赛模型并动态查看，未设置单选按钮 [英] Build knockout model and view dynamically, radio buttons not being set

问题描述

我正在制作 我之前的问题 完全动态的，因为模型是从服务器数据构建的，并且视图通过敲除 ko foreach<在视图模型中循环/code> 功能.

I am in the process of making one of my previous questions fully dynamic in that the model is built from server data, and the view loops through the viewmodel via the knockout ko foreach functionality.

我面临的问题是:

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.

依赖选项(在本例中为数据库和集群)在依赖选项更改时未选择其初始选择(即当操作系统更改时，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" 不是淘汰绑定表达式，它只是分配字符串 "$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 选项，这意味着您的 checked 应包含整个对象 而不仅仅是一个属性 (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屋！