backbone.js - 防止 Backbone 事件多次触发，如何检查事件是否已经注册？

Question

在我的路由器对象中，我创建了一个事件对象以在我的 View 之间共享

我将事件对象传递给我的 View

我像这样向这个共享对象注册事件

var productCatalogView = Backbone.View.extend({
      initialize: function (options) {
                     //bind alert event to sharedEvents
                    options.sharedEvents.bind("alert", this.alert,this);
                },
      alert: function () {
                    alert('alerted');
                }
    });

//下面的 View 触发alert事件

 var testView = Backbone.View.extend({

            initialize: function (options) {
                this.sharedEvents = options.sharedEvents;
            },
            events: {
                 'click #test': 'triggerAlert'
            },

            triggerAlert: function (e) {
                this.sharedEvents.trigger("alert", null);

            }           

        });

问题:我遇到的问题是，我第一次点击触发警报事件的按钮(第二个 View )时，警报事件被调用一次(好)，这导致第一个 View 通过触发路由传递搜索重新呈现参数，因此创建第一个 View 并再次绑定(bind) sharedEvents，因此当我第二次触发警报事件时，它会被触发两次(不好)，下次我重复相同的过程时，它会被触发 3 次，依此类推等等。我想这与第一个 View 中的事件绑定(bind)有关，它不止一次发生，即每次初始化 View 时(如果我是正确的)请问我怎样才能使事件的绑定(bind)发生一次。

这是我的路由器，显示了我如何初始化 View :

var Router = Backbone.Router.extend({

    sharedEvents:_.extend({},Backbone.Events),

    catalog: function (id) {

       //....unecessary code left out

        var productView = new ProductView({sharedEvents:this.sharedEvents});

            this.renderView(productView);
            this.renderView(new testView({sharedEvents: this.sharedEvents }));
       }

      renderView: function (view) {
                if (null != this.currentView) {
                    this.currentView.undelegateEvents();
                    // this.currentView.remove();
                }
                this.currentView = view;
                this.currentView.render();
            }

});

我试过了this 解决方案，但问题仍然存在，谢谢

Answer 1

尝试使用 Backbone.Events 的 listenTo 方法代替 bind 方法。然后，在您的 renderView() 中，调用 this.currentView.remove 而不是 this.currentView.undelegateEvents。

理由:

我相信您的 renderView() 方法，您正在使用 undelegateEvents() 认为它会释放您的 View 创建的所有事件监听器。它仅 释放绑定(bind)到 View 的$el 元素的事件。但是，在 View 上使用 remove() 会释放绑定(bind)到 $el 的事件以及使用 this.listenTo() 创建的事件(以及this.listenOnce()).

现在，一旦您渲染另一个 View ，旧的 currentView 将被正确释放，您只会收到一个警报。