动态插入Div会破坏KnockoutJS数据绑定

Dynamically Inserting a Div Breaks KnockoutJS DataBinding

本文关键字：KnockoutJS 数据绑定 插入 Div 动态      更新时间：2024-01-27

我已经创建了一个KnockoutJS应用程序，我还必须使用一些第三方的东西。我的第三方东西使用香草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>';
}

首先，单击"绑定"请注意，文本框已绑定到跨度；改变方框，就是改变跨度。

然后，单击"Throw a Wrench Into It"。现在，文本框不再是ViewModel的数据绑定，在其中键入不会影响跨度。

我不能做的事：

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

有办法解决这个问题吗？

因为替换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/

相关文章：