Knockout.js的cleanNode没有取消绑定事件 [英] Knockout.js's cleanNode does not unbind events

问题描述

我有一个类似数据的模态弹出窗口，需要清除绑定。 最高评级的答案表示使用knockout的清洁节点方法

I have a modal popup with similar data and need the bindings cleared. The answer for the highest rating says to use knockout's clean node method

以下是（手写）代码片段：

Here are (handwritten) code snippets:

var ViewModel = function(v) {
   var self = this;
   self.Foo = ko.observable(v.Foo);
   self.Bar = ko.observable(v.Bar);
   self.Stuffs = ko.observableArray([]);
   self.AddStuffs = function() { ... }
}

var myViewModel = new ViewModel({Foo : "", Bar: "" });
var myModal= document.getElementById("myModal");
ko.cleanNode(myModal);
ko.applyBindings(myViewModel, myModal);

html：

html:

<div id="myModal">
<a href="#" data-bind="click:$root.AddStuff">my link</a>
<table>
    <tbody data-bind="foreach:Stuffs ">
        <tr>
            <td><span data-bind="text:Interval"></span></td>
        </tr>
    </tbody>
</table>
</div>

当我第一次打开模态时，一切似乎都正常。但是这个答案说清洁节点是错误的解决方案，因为cleanNode是淘汰赛的内部清理。它不会清理事件处理程序，因此当我的模态关闭并再次打开并单击AddStuff的链接时，该事件将被调用n次（n =我打开弹出窗口的次数）。提到的解决方案是更好的模式是使用或围绕一个部分使用模板绑定，并允许使用新绑定重新渲染它。但是没有关于如何做的任何跟进。

When I first open the modal, everything seems to work okay. But this answer says cleanNode is the incorrect solution due to cleanNode being knockout's internal cleanup. It doesn't clean up event handlers, so when my modal is closed and opened again and I click the link for AddStuff, the event gets called n times (n = how many times I opened the popup). The proposed solution mentioned was "A better pattern is to use with or the template binding around a section and allow it to be re-rendered with the new bindings." but there was no followup on how to do either.

我不确定模板是什么意思，但我尝试添加with来绑定我用于模态的div，并且在一次链接点击时仍然会多次调用事件。有人可以帮我找到一种方法让这个工作正常吗？

I'm not sure what he means by "template" but I tried adding "with" to bind my div that I use for the modal and events are still being called multiple times on one link click. Can someone help me find a way to get this working right?

推荐答案

我不认为 cleanNode 就是你想要的。一般来说，你不需要清理节点并重新应用绑定，除非你做的是非常不寻常的事情，我认为你并不是这样。你只想更改DOM的特定部分所绑定的ViewModel，对吗？

I don't think cleanNode is what you want. Generally speaking, you shouldn't need to be cleaning nodes and reapplying bindings unless you're doing something very out of the ordinary, which I don't think you are. You simply want to change the ViewModel that that particular section of the DOM is bound to, correct?

我只是创建一个可观察到的模型应该保存的模型绑定，然后根据它编写您的模板。

I'd simply make an observable that holds the ViewModel that the modal should be bound to, and then write your template based on that.

var ModalViewModel = function(v) {
   var self = this;
   self.Foo = ko.observable(v.Foo);
   self.Bar = ko.observable(v.Bar);
   self.Stuffs = ko.observableArray([]);
   self.AddStuffs = function() { ... }
}

var modalViewModel = new ModalViewModel({Foo : "Foo", Bar: "Bar" });

var viewModel = {
    modal: ko.observable(modalViewModel)
};

var myModal= document.getElementById("myModal");

ko.applyBindings(myViewModel, myModal);

请注意，实际绑定到模态的viewModel永远不会更改，但包含一个子视图模型确实。上述逻辑应该只执行一次，然后更改或删除模态，可以修改 viewModel.modal observable。

Note that the viewModel that is actually bound to the modal never changes, but contains a sub-viewModel that does. The above logic should be executed exactly once, then to change or remove the modal, the viewModel.modal observable can be modified.

然后你的模板看起来像

<div id="myModal" data-bind="with: modal">
<a href="#" data-bind="click:AddStuff">my link</a>
<table>
    <tbody data-bind="foreach:Stuffs ">
        <tr>
            <td><span data-bind="text:Interval"></span></td>
        </tr>
    </tbody>
</table>
</div>

（唯一的变化是 with：modal part，删除不必要的 $ root ）

(With the only change being the with: modal part, and the removal of an unnecessary $root)

这是一个简化版本，演示了这个工作： http://jsfiddle.net/260wypyk/

Here's a minimalistic version that demonstrates this working: http://jsfiddle.net/260wypyk/

这篇关于Knockout.js的cleanNode没有取消绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！