动态插入Div打破KnockoutJS DataBinding(Dynamically Inserting a Div Breaks KnockoutJS DataBinding)

动态插入Div打破KnockoutJS DataBinding(Dynamically Inserting a Div Breaks KnockoutJS DataBinding)

我创建了一个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破坏了第三方代码所做的事情，所以我必须再次运行它，这将再次导致同样的问题。

有没有办法解决？

I have created a KnockoutJS application, and I also must use some third-party stuff with it. My third-party stuff uses vanilla Javascript to insert a div into the markup rendered by Knockout. Once this happens, Knockout stops working.

Here's a fiddle that encapsulates the problem: 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>'; }

First, click 'Bind.' Notice that the textbox is bound to the span; change the box, you change the span.

Then, click 'Throw a Wrench Into It.' Now, the textbox is no longer data-bound to the ViewModel, and typing into it doesn't impact the span.

Things I can't do:

Take the third-party code and refactor/integrate it into my Knockout stuff. Run the third-party code before I render with Knockout (which I think would help). Call ko.applyBindings again after running the third-party code. I can do this, but then Knockout destroys what the third-party code did, so I'd have to run it again, which would cause the same problem again.

Is there any way around this?

最满意答案

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

Because replacing element.innerHTML it's losing is binding. In order to overcome this. Two method are available: 1- Rebind the new element

2- Else

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

This is updated url: http://jsfiddle.net/p5o8842w/5/