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

$（文档）.ready（函数（）{
"严格使用",；
var vm=新vm（）；
应用绑定（vm，document.getElementById（“area1”）；
});

对视图应用绑定的次数不得超过一次。在2.2中，行为未定义，但仍然不受支持。在2.3中，它现在正确地显示了一个错误。使用knockout时，目标是对页面上的视图应用一次绑定，然后使用对viewmodel上的可观察对象的更改来更改页面上视图的外观和行为

在再次使用“applyBindings”之前，只需删除绑定即可

ko.cleanNode($element[0]);

---

我们应该做到这一点。嗯。

我也有同样的问题，我解决了

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

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

setInterval(ShowMessagesList, 10000)

---

我有一个不同的原因发生这个错误

我为保存/取消按钮创建了一个模板，希望显示在页面的顶部和底部。当我在一个元素中定义了我的模板时，它开始工作。。。。但是我听说你可以选择用普通的DIV元素创建一个模板

（这对我来说效果更好，因为我使用的是ASP.NET MVC，并且在运行时没有从脚本元素内部执行@variableName Razor语法。因此，通过改为DIV，我仍然可以在页面加载时让MVC Razor引擎在KnockoutJs模板内生成HTML。）

在我将模板更改为使用DIV而不是SCRIPT元素之后，我的代码如下所示。。。。这在IE10上运行良好。然而，后来当我在IE8上测试它时，它抛出了

“不能对同一元素多次应用绑定”错误

HTML

解决方案：

我所要做的就是将saveButtons\u模板DIV向下移动到底部，这样它就位于mainKnockoutDiv之外。这为我解决了问题

---

我想KnockoutJs多次尝试绑定我的模板DIV，因为它位于applyBindings目标区域内。。。并且没有使用脚本元素。。。。并被作为模板引用。

以上解决方案要发挥作用，有两件事很重要：

应用绑定时，需要指定范围（元素）

清除绑定时，必须指定与作用域完全相同的元素

代码如下

加价

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

Javascript

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

清晰绑定

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

---

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

---

我发现我不小心在两个地方添加了相同的脚本，它试图绑定两次。所以，在你因为一个简单的错误而大发雷霆之前，一定要检查一下这个问题

如果您反复使用一个元素（在我的例子中是一个引导模式对话框），那么多次调用

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.
}

或者像这样：

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：如果您使用mapping插件并将JSON数据转换为Observable，这种情况可能会更常见。

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

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

现在，当元素1和元素2都不存在时，就会出现错误。原因是，当找不到#element1和#element2时，Knockout的applyBindings返回document.body作为根元素。现在它尝试在身体上应用绑定两次

如果你问我的话，这可不是击倒对手的好办法。我希望有一个明确的错误消息，说明DOM中还不存在该元素

---

希望这能帮助一些人。

我在IE7/IE8中也遇到了同样的错误。在包括IE9/IE10在内的所有其他浏览器中工作良好

我发现对我有用的是消除了自动关闭标签

坏的

好

---

我最终通过在绑定处理程序的

init

函数中返回

{ControlsDescentBindings:true}

解决了我的问题。请参见更新的答案 现在我们可以使用

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

---

原始答案。 已经有很多答案了

首先，假设我们需要在一个页面中多次进行绑定是很常见的。比如说，我在引导模式中有一个表单，它将被一次又一次地加载。许多表单输入具有双向绑定

我通常采取简单的方法：每次装订前都要清除装订

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

---

只需确保此处

koNode

是必需的，因为，

ko.cleanNode（）

需要一个node元素，即使我们可以在

ko.applyBinding（vm）

中忽略它。在我的例子中，我添加到一个不存在的元素，或者，我添加到一个可能存在的元素的绑定，但它的父元素没有。与此类似：

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

ko.applyBindings(someVM, theDiv);

var segDiv=$（“#段”）//不存在，id错误
var theDiv=segDiv.html（“”）；
ko.应用绑定（someVM，theDiv）；

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

无法将绑定绑定到元素。可能的原因包括：多次绑定尝试，元素未绑定

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

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

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

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

ko.applyBindings(someVM, theDiv);

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