无法解析嵌套敲除绑定的绑定 [英] unable to parse bindings for nested knockout bindings

查看：119
本文介绍了无法解析嵌套敲除绑定的绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML文件 

 <身体GT; 
< div id =selectdiv> 
< input type =radioid =radio1name =radioGrp/> div1 
< input type =radioid =radio2name =radioGrp/> ; div2 
< / div> 
< div id =myDivname =myDivclass =myDivstyle =font-family：Helvetica; font-size：12pt; border：1px solid black;> 
< div id =subDiv1name =subDiv1data-bind =visible：subDiv1class =subDiv1style =color：＃FF0000; border：1px dotted black;> 
< h5>第1部分< / h5> 
< p> MONTHS ...< / p> 
< div id =tabContainer> 
 
    < li> 
    < b data-bind =text：$ data>< / b> 
    < / li> 
    < / ul> 
    < / div> 
    < / div> 
    < br /> 
    < div id =subDiv2name =subDiv2data-bind =visible：subDiv2class =subDiv2style =color：＃FF00FF; border：1px dashed black;> 
    < h5>第2部分< / h5> 
    < p>本段将成为您的内容段落...< / p> 
    < p>这里有另一篇内容文章。< / 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）; 
 
}）; 
}）; 
  





 月份列表是从第二个JavaScript中存在的方法获取的，但是如何将html知道该月绑定到第二个javascript ......我的意思是说，假设我的第一个javascript如下所示：$（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]）; 
}）;第二个javascript如下函数（ko）{
 
 alert（ready1）; 
 var getMonths = function（）{
 var self = this; 
 self.months = ko.observableArray（['Jan'，'Feb'，'Mar'，'etc']）; 
}; 
 
 // alert（ready2）; 
 //ko.applyBindings(new getMonths（））;`在这里输入代码`
}，我期待这样的事情，但不知道我要去哪里错了:( 
 :(


解决方案


  1. 首先调用applyBinding多次是错误的，每个元素只能调用一次，因为你没有传递任何元素参数，所以它会被绑定到body。
    2. 如果你需要使用多个视图模型，
  2. 使用和 biding来选择这个vm，然而在你的情况下你不需要这些视图模型（divdispalyViewModel1& divdispalyViewModel2）
  3. 然后你不用需要处理click事件并更改subDiv1的值，这正是ko的地址。

这就是你可以做到这一点

  $（document）.ready（function（）{
 alert（ready）; 
 var vm = f unction（）{
 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：

 <身体GT; 
< div id =selectdiv> 
< input type =radioid =radio1name =radioGrpvalue ='div1'data-bind =checked：subDiv1/> div1 
< input type = radioradio =div2data-bind =checked：subDiv1/> div2< / div> 
< div id =myDivname =myDivclass =myDivstyle =font-family：Helvetica; font-size：12pt; border：1px solid black;> 
< div id =subDiv1name =subDiv1data-bind =visible：subDiv1（）=='div1'class =subDiv1style =color：＃FF0000; border：1px dotted黑;> 
< h5>第1部分< / h5> 
 
< p> MONTHS ...< / p> 
< div id =tabContainer> 
 
    < li> < b data-bind =text：$ data>< / b> 
     
    < / li> 
    < / ul> 
    < / div> 
    < / div> 
    < br /> 
    < div id =subDiv2name =subDiv2data-bind =visible：subDiv1（）=='div2'class =subDiv2style =color：＃FF00FF; border：1px dashed黑;> 
    < h5>第2部分< / h5> 
     
    < p>这段将会是您的内容段落...< / p> 
    < p>这里有另一篇内容文章。< / p> 
    < / div> 
    < / div> 
    < / body>

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



以下是 jsFiddle


I created two sub divs inside main div and based on radio button selection, div is shown and hidden. Now , inside one of the sub div i created one dropdown and used foreach binding to populate it.Now when i am running , list of items are coming but show and hide functionality stopped working and in console it is shown as "unable to parse binding" of foreach. Kindly help me in resolving the issue. sample code is present below :

HTML FILE

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

解决方案

  1. First of all calling applyBinding multiple times is wrong. There should be only one call per element and since you are not passing any element parameter it will be bound to body.
  2. if you are using multiple view models you need to use with biding to pick that vm however in your case you dont need those view models (divdispalyViewModel1 & divdispalyViewModel2)
  3. Then you dont need to handle the click event and change the values of the subDiv1, this is exactly what ko addresses.

in all this is how you could do it

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

Your drop down doesn't work, that's different issue (css?)

Here is the jsFiddle

这篇关于无法解析嵌套敲除绑定的绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆