Question

我创建了一个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>';
}

首先，点击“绑定”。请注意，文本框绑定到span;更改框，您可以更改范围。

然后，点击“向其中扔一把扳手”。现在，文本框不再与ViewModel绑定数据，输入它不会影响范围。

我不能做的事情：

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

有什么方法吗？

Answer 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/

动态插入Div打破KnockoutJS DataBinding

1 个答案: