Knockoutjs 错误：您不能将绑定多次应用于同一元素答案

【问题标题】：Knockoutjs error: You cannot apply bindings multiple times to the same elementKnockoutjs 错误：您不能将绑定多次应用于同一元素
【发布时间】：2016-09-26 14:53:06
【问题描述】：

我正在尝试在现有网页中自动填充我无法更改的元素，并且该页面使用Knockoutjs。输入元素或多或少看起来像这样：

<input maxlength="8" id="xxx" data-bind="textInput: otcInput" type="tel">

然后我使用Knockoutjs 尝试取消绑定 textInput 并使用我需要的任何值动态填充输入元素，所以我这样做了：

ko.cleanNode($('#xxx'));
ko.applyBindings({
    otcInput: ko.observable("123") // populate myself
});

但是，这会导致错误You cannot apply bindings multiple times to the same element ...问题是为什么？我已经在清理节点了......或者我不是吗？有没有办法使用 knockoutjs 来查看在尝试执行我的“覆盖”ko.applyBindings 时是否存在悬空绑定或剩余物？

我还尝试了其他方法通过JQuery sendkeys plugin 设置输入值但没有成功，即

$('#xxx').sendkeys('123'); // nothing happens

我也试过了：

$('#xxx').unbind();
$('#xxx').off();
$('#xxx').sendkeys('123'); // but again nothing happens

【问题讨论】：

标签： javascript jquery html knockout.js

【解决方案1】：

您将 jQuery 对象传递给 cleanNode。就像applyBindings 一样，它必须是 DOM 元素，而不是 jQuery 对象。所以：

ko.cleanNode($('#xxx')[0]);
// -------------------^^^

示例——这失败了：

ko.applyBindings({
  foo: ko.observable("one")
}, $("#test")[0]);
ko.cleanNode($("#test"));
ko.applyBindings({
  foo: ko.observable("two")
}, $("#test")[0]);

<div id="test">
  <div data-bind="text: foo"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

...但这（使用[0]）有效：

ko.applyBindings({
  foo: ko.observable("one")
}, $("#test")[0]);
ko.cleanNode($("#test")[0]);
ko.applyBindings({
  foo: ko.observable("two")
}, $("#test")[0]);

<div id="test">
  <div data-bind="text: foo"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

我也尝试过其他方式来设置输入值

如果那是你的目标，你不必搞砸绑定（这可能会产生不良影响），只需：

$("#xxx").val("new value").trigger("change");

trigger("change") 是让 KO 看到更改并更新 observable 所必需的。（或者因为它是一个textInput 绑定，你可以使用input 而不是change。）

示例——这失败了：

// The previously-bound stuff:
var vm = {
  foo: ko.observable("foo")
};
ko.applyBindings(vm, document.body);

// Prove the observable and input are in sync:
console.log("check1", vm.foo(), $("#test").val());

// Update the field
$("#test").val("updated").trigger("change");

// Prove the observable and input are still in sync:
console.log("check2", vm.foo(), $("#test").val());

<input id="test" type="text" data-bind="textInput: foo">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

【讨论】：