KnockoutJs v2.3.0：错误您不能将绑定多次应用于同一个元素
我刚刚升级到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")); });
你只需要再次使用“applyBindings”之前删除绑定。
ko.cleanNode($element[0]);
应该做的伎俩。 HTH。
一些可能发生的事情也会引发这个exception，如下所示。 假设你有：
ko.applyBindings(myViewModel1, document.getElementById('element1')); ... ko.applyBindings(myViewModel2, document.getElementById('element2'));
现在，当＃element1和＃element2都不存在时，你会得到错误。 原因是当找不到＃element1和＃element2时，Knockout的applyBindings作为根元素返回到document.body。 现在，它试图在身体上应用绑定两次…
如果你问我，那不是Knockout的一个很好的倒退。 我宁愿有一个明确的错误消息，元素不存在于DOM（还）。
希望这有助于一些人。
您不应该多次将绑定应用于视图。 在2.2中，行为是未定义的，但仍然不受支持。 在2.3中，它现在正确地显示了一个错误。 当使用knockout时，目标是在页面上对视图应用绑定一次，然后在视图模型上使用对observable的更改来改变页面上视图的外观和行为。
有两件事情对上述解决scheme的工作很重要：
-
当应用绑定，你需要指定范围（元素）！
-
清除绑定时，必须指定与作用域完全相同的元素。
代码如下
标记
<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'));
这个问题有很多很好的答案，但我有一个noobie的答案。
我发现我不小心在两个地方添加了相同的脚本，并试图绑定两次。 所以在你把头发弄错之前，一定要检查一下这个问题。
如果你反复使用一个元素（在我的情况下是一个引导模式对话框），那么多次调用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数据转换为可观察对象，则可能更经常发生这种情况。
我终于通过在绑定处理函数的init函数中返回{ controlsDescendantBindings: true }来解决我的问题。 看到这个
我有这个错误发生的原因不同。
我创build了一个保存/取消button的模板，我想在页面的顶部和底部出现。 它起初工作时，我的模板定义在一个<script type =“text / html”>元素….但是，然后我听说你可以select创build一个普通的DIV元素模板。
（这对我来说更好，因为我使用的是ASP.NET MVC，而且我的@variableName Razor语法没有在脚本元素的内部被执行，所以通过改变为DIV，我仍然可以拥有MVC Razor引擎当页面加载时在我的KnockoutJs模板中生成HTML。）
当我改变我的模板使用DIV而不是一个SCRIPT元素后，我的代码看起来像这样….在IE10上工作得很好。 但是，后来当我在IE8上testing它 ，它扔了….
“你不能绑定多次到相同的元素”错误…..
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'));
解决scheme ：
我所要做的就是将saveButtons_template DIV移动到底部，这样它就不在mainKnockoutDiv的范围之内了。 这解决了我的问题。
我想KnockoutJs试图绑定我的模板DIV多次，因为它位于applyBindings目标区域内…并没有使用SCRIPT元素….并被引用为模板。
我在IE7 / IE8中遇到了同样的错误。 在所有其他浏览器（包括IE9 / IE10）中工作良好。
我发现我的工作是消除自我结束标签。
坏
<div> <span data-bind="text: name"/> </div>
好
<div> <span data-bind="text: name"></span> </div>
已经有很多答案了！
首先，假设我们需要在页面中多次执行绑定，这是相当常见的。 比方说，我在Bootstrap模式中有一个表单，它会被一次又一次地加载。 许多表单input都有双向绑定。
我通常采取简单的方法：在绑定之前每次清除绑定。
var koNode = document.getElementById('formEdit'); ko.cleanNode(koNode); ko.applyBindings(vm, koNode);
只要确保koNode是必需的，因为ko.cleanNode()需要一个节点元素，尽pipe我们可以在ko.applyBinding(vm)忽略它。
我有同样的问题，我解决了它。
var vm = new MessagesViewModel() ko.applyBindings(vm) function ShowMessagesList() { vm.getData("MyParams") } setInterval(ShowMessagesList, 10000)
在我的情况下，我添加到一个不存在的元素，或者，我添加绑定到一个可能存在的元素，但它的父母没有。 与此类似：
var segDiv = $("#segments"); //did not exist, wrong id var theDiv = segDiv.html("<div></div>"); ko.applyBindings(someVM, theDiv);
据我所知，这个错误似乎有点超载，因为它会触发许多可能发生的与元素不同的错误，就像它不存在。 因此，错误描述可能具有高度的欺骗性。 它应该可能读取：
“未绑定绑定到元素可能的原因包括：多次绑定尝试，元素不存在，元素不在DOM层次结构，浏览器中的怪异等”
