Knockout.js v2.3.0 错误“您不能将绑定多次应用于同一元素”

Question

我刚刚升级到 Knockout.js 2.3.0，现在我收到了这个错误：

You cannot apply bindings multiple times to the same element.

我在 2.2.1 中没有。

单击href 后，我从 MVC 控制器获取部分视图并将其添加到页面中。当我第二次单击链接以获取部分视图时，会发生该错误。我这样做了很多次。

有没有办法清除它并避免抛出新的错误？

这是我的代码：

$.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");
    });
});

这是我的 HTML：

<div id="area1">
    <!-- grid here with links -->
</div>
<div id="editAssignedPartial"></div>

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

Answer 1

ko.cleanNode($("#modalPartialView")[0]);
ko.applyBindings(vm, $("#modalPartialView")[0]);

这对我有用，但正如其他人所说，cleanNode 是一个内部 ko 函数，所以可能有更好的方法。

Answer 2

我遇到了同样的问题，我是这样解决的：

var vm = new MessagesViewModel()
ko.applyBindings(vm)

function ShowMessagesList() {
   vm.getData("MyParams")
}

setInterval(ShowMessagesList, 10000)

Answer 3

在我的例子中，我正在添加一个不存在的元素，或者，我正在向一个可能存在的元素添加绑定，但它的父元素没有。类似这样：

var segDiv =  $("#segments"); // did not exist, wrong id
var theDiv = segDiv.html("<div></div>");

ko.applyBindings(someVM, theDiv);

据我所知，这个错误似乎有点过载，因为它会触发元素可能发生的许多不同错误，比如它不存在。因此，错误描述可能具有高度欺骗性。应该是这样的：

Failure to bind bindings to element. Possible reasons include: multiple binding attempts, element not existing, element not in DOM hierarchy, quirks in browsers, etc

Answer 4

我在 IE 7/8 中遇到了同样的错误。在包括 IE 9/10 在内的所有其他浏览器中运行良好。

我发现对我有用的是消除自闭标签。

不好：

<div>
    <span data-bind="text: name"/>
</div>

好：

<div>
    <span data-bind="text: name"></span>
</div>

Answer 5

我遇到此错误的原因不同。

我为希望显示在页面顶部和底部的保存/取消按钮创建了一个模板。起初，当我在 <script type="text/html"> 元素中定义模板时，它起作用了....但后来我听说您可以选择用普通的 <div> 元素创建模板。

（这对我来说效果更好，因为我使用的是 ASP.NET MVC，并且我的 @variableName Razor 语法没有在运行时从 <script> 元素内部执行。所以改为改为 <div>，当页面加载时，我仍然可以让 MVC Razor 引擎在我的 Knockout.js 模板中生成 HTML。）

在我将模板更改为使用<div> 而不是<script> 元素后，我的代码看起来像这样......在 IE 10 上运行良好。但是，后来 当我在 IE 上测试它时8，它抛出了错误：

You cannot apply bindings multiple times to the same element

HTML：

<div id="mainKnockoutDiv" class="measurementsDivContents hourlyMeasurements">

  <div id="saveButtons_template" style="display: none;">
    ... my template content here ...
  </div>

  <!--ko template: { name: 'saveButtons_template' } -->
  <!--/ko-->

  Some_HTML_content_here....

  <!--ko template: { name: 'saveButtons_template' } -->
  <!--/ko-->

</div>

JavaScript：

ko.applyBindings(viewModel, document.getElementById('mainKnockoutDiv'));

解决方案：

我所要做的就是将我的saveButtons_template<div> 移到底部，使其位于mainKnockoutDiv 之外。这解决了我的问题。

我想 Knockout.js 试图多次绑定我的模板 <div>，因为它位于 applyBindings 目标区域内......并且没有使用 <script> 元素......并且被引用作为模板。

Answer 6

更新答案

现在我们可以使用dataFor() 来检查绑定是否已应用，我宁愿检查数据绑定，而不是cleanNode() 和applyBindings()。

像这样：

var koNode = document.getElementById('formEdit');
var hasDataBinding = !!ko.dataFor(koNode);
console.log('has data binding', hasDataBinding);
if (!hasDataBinding) { ko.applyBindings(vm, koNode);}

---

原始答案。

已经有很多答案了！

首先，假设我们需要在一个页面中进行多次绑定是相当普遍的。比如说，我在 Bootstrap 模式中有一个表单，它将一次又一次地加载。许多表单输入都有双向绑定。

我通常采取简单的方法：每次绑定前清除绑定。

var koNode = document.getElementById('formEdit');
ko.cleanNode(koNode);
ko.applyBindings(vm, koNode);

只需确保此处koNode 是必需的，因为ko.cleanNode() 需要一个节点元素，即使我们可以在ko.applyBinding(vm) 中省略它。

Answer 7

如果您一遍又一遍地重用一个元素（在我的例子中是一个 Bootstrap 模式对话框），那么多次调用 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 数据转换为 observables，这可能会更频繁地发生在您身上。

Answer 8

我终于通过在绑定处理程序的init 函数中返回{ controlsDescendantBindings: true } 解决了我的问题。见this。

Answer 9

这个问题有很多很好的答案，但我有一个新手答案。

我发现我不小心在两个地方添加了相同的脚本，它试图绑定两次。所以在你拔头发之前，一定要检查一下这个问题。

Answer 10

可能发生的引发此异常的情况如下。假设你有：

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

现在，当 #element1 和 #element2 都不存在时，您将收到错误消息。原因是当找不到#element1 和#element2 时，Knockout 的applyBindings 会退回到document.body 作为根元素。现在它尝试在 body 上应用两次绑定...

如果你问我，这不是 Knockout 的一个很好的后备方案。我宁愿有一个明确的错误消息，表明该元素在 DOM 中不存在（尚）。

Answer 11

您需要在再次使用applyBindings 之前删除绑定：

ko.cleanNode($element[0]);

Answer 12

您不应该对视图多次应用绑定。在 2.2 中，该行为未定义，但仍不受支持。在 2.3 中，它现在正确显示错误。使用淘汰赛时，目标是对页面上的视图应用一次绑定，然后使用对视图模型上的可观察对象的更改来更改页面上视图的外观和行为。

Answer 13

要使上述解决方案发挥作用，有两点很重要：

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'));