Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/363.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 动态构建淘汰模型和视图,不设置单选按钮_Javascript_Knockout.js - Fatal编程技术网

Javascript 动态构建淘汰模型和视图,不设置单选按钮

Javascript 动态构建淘汰模型和视图,不设置单选按钮,javascript,knockout.js,Javascript,Knockout.js,我正在制作一个完全动态的,因为模型是从服务器数据构建的,视图通过knockoutko-foreach功能在viewmodel中循环 我面临的问题是: 单选选项不保留设置的值,即单击操作系统,然后选择数据库选项,然后操作系统设置消失 当依赖选项更改时(即,当操作系统更改时,数据库应返回到第一个选项,无),依赖选项(在本例中为数据库和群集)没有选择其初始选择 我认为问题要么与以下代码有关: computedOptions.subscribe(function () {

我正在制作一个完全动态的,因为模型是从服务器数据构建的,视图通过knockout
ko-foreach
功能在viewmodel中循环

我面临的问题是:

  • 单选选项不保留设置的值,即单击操作系统,然后选择数据库选项,然后操作系统设置消失

  • 当依赖选项更改时(即,当操作系统更改时,数据库应返回到第一个选项,无),依赖选项(在本例中为数据库和群集)没有选择其初始选择

  • 我认为问题要么与以下代码有关:

     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 -->
    
    
    描述
    价格
    
    我不确定是哪一个,希望能有一双新的眼睛,因为我的大脑在JSFIDLE课程中受到了伤害。

    您有两个问题:

    • 您没有正确绑定单选按钮的名称:
      name=“$parent.name”
      不是敲除绑定表达式,它只是将字符串
      “$parent.name”
      分配给所有单选按钮。您需要的是使用
      attr
      绑定:

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

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