个人中心
gpt4 book ai didi

html - 无法解析嵌套 knockout 绑定(bind)的绑定(bind)

转载 作者：行者123 更新时间：2023-11-28 03:28:38 25 4
gpt4 key购买 nike

我在主 div 中创建了两个子 div，并根据单选按钮选择显示和隐藏 div。现在，在其中一个子 div 中，我创建了一个下拉列表并使用 foreach 绑定(bind)来填充它。现在，当我运行时，项目列表即将出现，但显示和隐藏功能停止工作，并且在控制台中显示为“无法解析绑定(bind)“的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 文件

$(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. 首先，多次调用 applyBinding 是错误的。每个元素应该只有一个调用，因为您没有传递任何元素参数，它将绑定(bind)到主体。
  2. 如果您使用多个 View 模型，则需要使用 with 出价来选择该虚拟机，但在您的情况下，您不需要这些 View 模型(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

关于html - 无法解析嵌套 knockout 绑定(bind)的绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19449930/

25 4 0
文章推荐： JavaFX - 设置 TitledPane 之间的边距
文章推荐： C++ 实现不使用全局声明的函数
文章推荐： html - 需要图像在 Div 中堆叠在另一个图像之上
文章推荐： c++ - 在 C++ 中传递专门的函数指针
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com