KnockoutJs v2.3.0:错误您无法多次将绑定应用于同一元素

Question

我刚刚升级到2.3.0,现在我收到错误'你不能多次将绑定应用到同一个元素.' 我没有进入2.2.1.

我从MVC控制器获得部分视图,并在点击href后将其添加到页面中.第二次单击链接以获取局部视图时发生错误.我这样做了很多次.

有没有办法清除这一点,并避免抛出新的错误？

这是我的代码:

$.get(url + "GetAssignedCompaniesView?layoutId=" + layoutId + "&noCache=" + new Date().getMilliseconds(), function (result) {
              $("#editAssignedPartial").html($(result));
              showEditAssignedArea(true);
              $(window.document).ready(function () {
                 // error is thrown here
                 ko.applyBindings(self, window.document.getElementById("editAssigned"));
                 $("#layoutId").attr("value", layoutId);
                 updateTypeHiddenElement.attr("value", "companies");
      });
    });

<div id="editAssignedPartial">
</div>

$(document).ready(function () {
  'use strict';
  var vm = new Vm();
  ko.applyBindings(vm, document.getElementById("area1"));
});

Answer 1

您只需在再次使用"applyBindings"之前删除绑定.

ko.cleanNode($element[0]);

应该做的伎俩.HTH.

Answer 2

引发此异常的事情也可能发生以下情况.说你有:

ko.applyBindings(myViewModel1, document.getElementById('element1'));
...
ko.applyBindings(myViewModel2, document.getElementById('element2'));

现在,当#element1和#element2都不存在时,您将收到错误.原因是当找不到#element1和#element2时,Knockout的applyBindings作为根元素返回到document.body.现在它试图在身体上施加两次绑定......

如果你问我,Knockout不是一个好的后备.我宁愿有一个明确的错误信息,即该元素在DOM中尚不存在.

希望这可以帮助一些人.

Answer 3

您不应该多次对视图应用绑定.在2.2中,行为未定义,但仍然不受支持.在2.3中,它现在正确显示错误.使用knockout时,目标是将绑定一次应用于页面上的视图,然后对viewmodel上的observable使用更改来更改页面上视图的外观和行为.

Answer 4

对于上述解决方案而言,有两件事是重要的:

1. 应用绑定时,需要指定范围(元素)!!

2. 清除绑定时,必须指定与范围完全相同的元素.

代码如下

标记

<div id="elt1" data-bind="with: data">
    <input type="text" data-bind="value: text1" >
</form>

绑定视图

var myViewModel = {
  "data" : {
    "text1" : "bla bla"
  }
}:

使用Javascript

ko.applyBindings(myViewModel, document.getElementById('elt1'));

清除绑定

ko.cleanNode(document.getElementById('elt1'));

Answer 5

这个问题有很多很好的答案,但我有一个noobie答案.

我发现我偶然在两个地方添加了相同的脚本,它试图绑定两次.因此,在您解决一个简单的错误之前,请务必检查此问题.

Answer 6

如果您要重复使用一个元素（在我的情况下是一个引导模式对话框），则ko.applyBindings(el)多次调用将导致此问题。

相反，只需这样做一次：

if (!applied) {
    ko.applyBindings(el);
    applied = true;
}

或像这样：

var apply = function (viewModel, containerElement) {
    ko.applyBindings(viewModel, containerElement);
    apply = function() {}; // only allow this function to be called once.
}

PS：如果您使用映射插件并将JSON数据转换为可观察对象，则这种情况可能会发生在您身上。

Answer 7

我终于通过返回绑定处理程序{ controlsDescendantBindings: true }的init功能解决了我的问题.看到这个