动态插入 Div 会破坏 KnockoutJS DataBinding答案

【问题标题】：Dynamically Inserting a Div Breaks KnockoutJS DataBinding动态插入 Div 会破坏 KnockoutJS DataBinding
【发布时间】：2015-04-21 16:29:42
【问题描述】：

我创建了一个 KnockoutJS 应用程序，我还必须使用一些第三方的东西。我的第三方东西使用 vanilla Javascript 将 div 插入到由 Knockout 呈现的标记中。一旦发生这种情况，Knockout 将停止工作。

这是一个封装问题的小提琴：http://jsfiddle.net/p5o8842w/1/

HTML：

<div style="margin-bottom:50px;">
    <button onclick='BindVM();' >Bind</button>
    <button onclick='ThrowWrench();'>Throw a Wrench Into It</button>
</div>

<div id="ViewModel" data-bind="template: 'Template'">
</div>

<script type="text/html" id='Template'>
    <div style="margin-bottom:20px;">
        <span data-bind="text: Name"></span>
    </div>
    <div id="infoDiv">
        <input type="text" data-bind="text: Name, value: Name, valueUpdate: 'keyup'" />
    </div>
</script>

JavaScript：

function BasicVM () {
    var self = this;

    self.Name = ko.observable('The Name');
    self.Title = ko.observable('The Title');
}

function BindVM() {
    var vm = new BasicVM();
    var element = document.getElementById('ViewModel');
    ko.cleanNode(element);
    ko.applyBindings(vm, element);
}

function ThrowWrench() {    
    var element = document.getElementById('infoDiv');
    element.innerHTML = "<div class='container'>" + element.innerHTML + '</div>';
}

首先，点击“绑定”。请注意，文本框绑定到跨度；改变盒子，你就改变了跨度。

然后，点击“把扳手扔进去”。现在，文本框不再与 ViewModel 数据绑定，并且在其中输入内容不会影响跨度。

我不能做的事：

获取第三方代码并将其重构/集成到我的 Knockout 内容中。
在我使用 Knockout 渲染之前运行第三方代码（我认为这会有所帮助）。
运行第三方代码后再次调用ko.applyBindings。我可以这样做，但是 Knockout 破坏了第三方代码所做的事情，所以我必须再次运行它，这会再次导致同样的问题。

有没有办法解决这个问题？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

因为替换 element.innerHTML 它失去了约束力。为了克服这一点。有两种方法可用： 1- 重新绑定新元素

2-否则

var element = document.getElementById('infoDiv');
var parent = element.parentNode;
var wrapper = document.createElement('div');
parent.replaceChild(wrapper, element);
wrapper.appendChild(element);

这是更新的网址：http://jsfiddle.net/p5o8842w/5/

【讨论】：