Html 无法分析嵌套淘汰绑定的绑定_Html_Knockout.js

Html 无法分析嵌套淘汰绑定的绑定

html knockout.js

Html 无法分析嵌套淘汰绑定的绑定,html,knockout.js,Html,Knockout.js,我在主div中创建了两个子div，并根据单选按钮选择显示和隐藏div。现在，在其中一个子分区中，我创建了一个下拉列表，并使用foreach绑定填充它。现在，当我运行时，项目列表即将出现，但显示和隐藏功能停止工作，在控制台中，它显示为foreach的“无法解析绑定”。请帮我解决这个问题。示例代码如下所示： HTML文件 <body> <div id="selectdiv"> <input type="radio" id="radio1" name="rad

我在主div中创建了两个子div，并根据单选按钮选择显示和隐藏div。现在，在其中一个子分区中，我创建了一个下拉列表，并使用foreach绑定填充它。现在，当我运行时，项目列表即将出现，但显示和隐藏功能停止工作，在控制台中，它显示为foreach的“无法解析绑定”。请帮我解决这个问题。示例代码如下所示：

HTML文件

<body>
<div id="selectdiv">
    <input type="radio" id="radio1" name="radioGrp" />div1
    <input type="radio" id="radio2" name="radioGrp" />div2
</div>
<div id="myDiv" name="myDiv"   class="myDiv" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
  <div id="subDiv1" name="subDiv1"  data-bind="visible:subDiv1" class="subDiv1" style="color: #FF0000; border: 1px dotted black;">
    <h5>Section 1</h5>
    <p>MONTHS...</p>
    <div id="tabContainer">
        <ul data-bind="foreach: months">
            <li>
                <b data-bind="text: $data"></b>
            </li>
        </ul>
    </div>  
  </div>
  <br />
  <div id="subDiv2" name="subDiv2"  data-bind="visible:subDiv2" class="subDiv2" style="color: #FF00FF;border: 1px dashed black;">
    <h5>Section 2</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
</div>
</body>

$(document).ready(function() {
    alert("ready");
    var divdispalyViewModel1 = { 
        subDiv1: ko.observable(true)
    };
    var divdispalyViewModel2 = { 
        subDiv2: ko.observable(true)
    };
    ko.applyBindings({
        months:[ 'Jan', 'Feb', 'Mar', 'etc' ]
    });
   // alert("ready2");
    ko.applyBindings(divdispalyViewModel1);
    ko.applyBindings(divdispalyViewModel2);    
    $('#radio1').click(function () { 
        alert("radio 1");
        divdispalyViewModel1.subDiv1(true);
        divdispalyViewModel2.subDiv2(false);

    });
    $('#radio2').click(function () { 
        alert("radio2");
        divdispalyViewModel1.subDiv1(false);
        divdispalyViewModel2.subDiv2(true);

    });
 });

首先，多次调用applyBinding是错误的。每个元素应该只有一个调用，因为您并没有传递任何元素参数，所以它将绑定到body

如果您使用多个视图模型，则需要将

与

结合使用以选择该虚拟机，但在您的情况下，您不需要这些视图模型（divdispalyViewModel1和divdispalyViewModel2）

然后，您不需要处理单击事件并更改subDiv1的值，这正是ko要解决的问题

所有这些都是你可以做到的

$(document).ready(function () {
    alert("ready");
    var vm = function () {
        var self = this;
        self.subDiv1 = ko.observable(false);
        self.subDiv2 = ko.observable(false);

        self.months = ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    };

    // alert("ready2");
    ko.applyBindings(new vm());

});

html:


第一组
第二组
第一节
几个月






第二节
这一段将是你的内容段
这里有另一篇内容文章

您的下拉列表不起作用，这是另一个问题（css？）

这是months属性可以只是一个普通数组，因为它永远不会改变。@Dhana.非常感谢您的解决方案。我还有一个疑问，因为我需要在我的项目中实现一个场景，而且我是击倒js的新手，所以请帮助我。假设我从其他javascript中的某个方法获得月值，并且该方法是从上面的javascript方法vm调用的。在这种情况下，如何传递月份的值并将其绑定到html。如果您的意思是通过调用方法获取月份列表，那么您只需要在months observableArray中推送这些值。视图将更新。通读淘汰文档，有足够的示例来理解ObservalArrays和rest。由于我的查询太长，我无法输入注释。因此我将其放入“添加另一个答案”部分。@Dhanakrishnasami正如您所说，每个元素应该有一个绑定，我也试过这样做，但不起作用。你能告诉我哪里出了问题吗？我会非常感谢你的。JSIDLE链接是

$(document).ready(function () {
    alert("ready");
    var vm = function () {
        var self = this;
        self.subDiv1 = ko.observable(false);
        self.subDiv2 = ko.observable(false);

        self.months = ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    };

    // alert("ready2");
    ko.applyBindings(new vm());

});

<body>
    <div id="selectdiv">
        <input type="radio" id="radio1" name="radioGrp" value='div1' data-bind="checked:subDiv1" />div1
        <input type="radio" id="radio2" name="radioGrp" value='div2' data-bind="checked:subDiv1" />div2</div>
    <div id="myDiv" name="myDiv" class="myDiv" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
        <div id="subDiv1" name="subDiv1" data-bind="visible:subDiv1()=='div1'" class="subDiv1" style="color: #FF0000; border: 1px dotted black;">
             <h5>Section 1</h5>

            <p>MONTHS...</p>
            <div id="tabContainer">
                <ul data-bind="foreach: months">
                    <li> <b data-bind="text: $data"></b>

                    </li>
                </ul>
            </div>
        </div>
        <br />
        <div id="subDiv2" name="subDiv2" data-bind="visible:subDiv1()=='div2'" class="subDiv2" style="color: #FF00FF;border: 1px dashed black;">
             <h5>Section 2</h5>

            <p>This paragraph would be your content paragraph...</p>
            <p>Here's another content article right here.</p>
        </div>
    </div>
</body>