使用主干渲染时,在模态中获取双重事件

时间:2015-07-15 14:36:08

标签: backbone.js

我正在尝试使用主干单击保存按钮来渲染模态,这是第一次如果我执行任何操作它工作正常然后我关闭模态并再次单击保存,模式再次呈现,现在如果我做任何关于他们触发两次的模态的事件。每次关闭时,此迭代都会增加,然后再次单击“保存”。

这就是我在页面加载时渲染模态的方式:

new app.notifyView(this.options.model);     

每次单击“保存”按钮时,都会调用此按钮。

1 个答案:

答案 0 :(得分:1)

这是一个名为“Zombie Event Handlers”的常见问题。你可以在这里阅读一些很棒的细节:https://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

以下是过于简化的说明:每次使用new app.myView()时,都会创建myView对象的新实例(我们称之为“ViewOne”)。 ViewOne有自己的事件处理程序。假设您关闭ViewOne,因此它不再可见,但随后创建一个新实例(“ViewTwo”)。 ViewTwo现在有了自己的新事件处理程序,ViewOne仍然在后台运行。当您执行操作时,ViewOne的事件监视器仍然在内存中与ViewTwo一起处于活动状态,因此两者都被调用并且操作发生两次。你说,“怪异”,“让我关闭这个观点并打开一个新观点。” ViewThree在内存中添加了另一组事件处理程序,现在您获得了3次调用。要阻止这些“僵尸”在你的记忆中笨拙,你需要知道如何访问每个单独的实例并将其摘下来。首先要防止它们形成要容易得多。

处理此问题的最简单方法是使用“句柄”。为视图分配一个唯一的变量(一个“句柄”,以便稍后抓取该视图的特定实例 - 如上面的“ViewOne”,“ViewTwo”和“ViewThree”),并确保该视图是在重新分配事件处理程序之前关闭/离开。有很多方法可以实现这一点。如果您使用代码更新您的问题,我很乐意提供适合您特定情况的解决方案。

更新:

这不是很多代码可以使用,但这是一个想法:

app.modal = app.modal || new app.notifyView(this.options.model);

这只会创建一次视图 - 如果它已经存在,它将引用现有的句柄。稍后,如果要手动清除事件处理程序,可以调用以下命令:

function clearHandlers() {
    app.modal.remove();
    app.modal.unbind();
}

我将重申,Derick Bailey关于预防/解决这个问题的原因和方法的令人敬畏的解释非常值得一读。如果你有几分钟,链接仍然在上面。