2

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

文件

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

$(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 :( 
:(
4

1 回答 1

0
  1. 首先多次调用 applyBinding 是错误的。每个元素应该只有一个调用，并且由于您没有传递任何元素参数，因此它将绑定到正文。
  2. 如果您使用多个视图模型，则需要使用with投标来选择该虚拟机，但在您的情况下，您不需要这些视图模型（divdispalyViewModel1 和 divdispalyViewModel2）
  3. 然后您不需要处理点击事件并更改 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

于 2013-10-18T13:34:39.273 回答