Question

我在主div中创建了两个子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>

JS FILE

$(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);

    });
 });

Month list is fetched from method present in second javascript but how html will get to know that month is binded to second javascript...i mean to say, suppose my first javascript is like below :              $(document).ready(function() {
alert("ready");
    var vm = function () {
        var self = this;
        self.subDiv1 = ko.observable(false);
        self.subDiv2 = ko.observable(false);
        var subDemoMainObj=new subDemoMain();
        subDemoMainObj.getMonths();
        //self.months = ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    };
    ko.applyBindings(new vm());
    ko.applyBindings(subDemoMainObj, $('#tabContainer')[0]);
 });                                                                 Second javascript is as below                                          function(ko){

alert("ready1");
    var getMonths = function () {
        var self = this;
        self.months = ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    };

    // alert("ready2");
    //ko.applyBindings(new getMonths());`enter code here`
},                                                                    i am expecting something like this but not understanding where i am going wrong :( 
:(

Answer 1

首先多次调用applyBinding是错误的。每个元素应该只有一个调用，因为你没有传递任何元素参数，它将被绑定到body。
如果您使用多个视图模型，则需要使用with biding来选择该vm，但在您的情况下，您不需要这些视图模型（divdispalyViewModel1＆amp; divdispalyViewModel2）
然后你不需要处理click事件并更改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：

<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>

你的下拉不起作用，那是不同的问题（css？）

以下是jsFiddle

无法解析嵌套的敲除绑定的绑定

1 个答案: