在 Backbone.js 中使用后退按钮后多次触发事件

Posted 2023-02-22

【中文标题】在 Backbone.js 中使用后退按钮后多次触发事件

【英文标题】：Event triggered multiple times after using back button in Backbone.js

【发布时间】：2011-12-14 14:22:18

【问题描述】：

我正在构建一个 Backbone 应用程序，但遇到了这个奇怪的问题。在状态A（路线：“”），我有这样的看法：

var view = Backbone.View.extend(
    events : 
         "click a.continue" : "next"
    ,

    next : function(e) 
       //Some stuff
       Backbone.history.navigate("/page2");
    
);

一旦我点击带有“继续”类的锚点，我就会被重定向到状态 B（路由：“/page2”）。如果我点击浏览器的后退按钮，然后点击锚点，调试我注意到 next 函数被触发了两次。实际上，如果我一直来回走动，触发事件的次数就会不断增加。

有什么线索吗？

【参考方案1】：

我也有同样的问题，解决办法是……

    App.Router = Backbone.Router.extend(
    routes: 
        "fn1": "fn1",
        "fn2": "fn2"
    ,
    stopZombies: function(objView)
        if(typeof objView === "object")
            objView.undelegateEvents();
            $(objView.el).empty();
        
    ,
    fn1: function()

        this.stopZombies(this.lastView);

        var view1 = new App.v1();
        this.lastView = view1;
    ,
    fn2: function()

        this.stopZombies(this.lastView);

        var view2 = new App.v2();
        this.lastView = view2;
    
);

将最后执行的视图存储在 this.lastView 中，然后 stopZoombies() 从此视图中移除事件。

【讨论】：

我不知道这是什么语言。但它解决了我的问题。谢谢 :-) +1

【参考方案2】：

你有一个僵尸视图。

它的要点是，当您实例化和显示第二个视图（“状态 B”）时，您不会处理第一个视图。如果您有任何事件绑定到视图的 html 或视图的模型，则需要在关闭表单时清理这些事件。

我写了一篇详细的博客文章，在这里：http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

请务必阅读 cmets，因为“Johnny O”提供了一种我认为非常出色的替代实现。

【讨论】：

感谢 Derick，非常好的文章。我还发现你可以简单地做一些像 $(view.el).unbind();在某些情况下。