backbone.js 为每个视图触发的常见事件

Question

我是 backbone 的新手，负责扩展和维护 backbone 应用程序。

我遇到了一个问题，即 'log out' 按钮在加载每个视图时都会触发。我已经为常见的视图事件创建了一个基础class：

BaseView = Backbone.View.extend({
    logout: function() {
        console.log('logout');
    },
    events: {
        'click .logout':'logout'
    }
})

然后我在相关视图中继承这个

DashboardView = BaseView.extend({
    el : '#app',
    render: function(){
        this.$el.html( _.template($('#Dashboard').html()) );
        return this;
    }
})

使用的模板中有按钮 <div class="logout"></div>

有四个视图组成了我正在处理的网站部分，如果所有四个视图都已加载，则在单击时会触发 4 次注销。

我已经尝试了几种方法来解决这个问题，例如在视图更改时解除绑定以及 setElement 没有成功。

首先，这是我应该解决的问题吗？如果是这样，我该怎么做？

干杯

Answer 1

Backbone 使用 jquery 的 on 注册 DOM 事件。
当您实例化 4 个视图时，如果 4 个事件侦听器都定义了相同的 parent 元素，则它们将绑定到相同的元素。

就个人而言，如果我当前位于需要身份验证的页面中，我倾向于使用 window.location.href 创建重定向。如果我在不需要身份验证的页面中，我只是 re-render header，用登录 (/register) 按钮替换用户名。

Answer 2

我想我找到了解决办法。

在我现在调用的事件函数中 this.undelegateEvents(); 例如：

showview : function() {
    this.undelegateEvents();
    app.appRouter.navigate("/dashboard", true);
}

并且在 appRouter 函数的 app.js 中我调用 this.DashboardView.delegateEvents(); 所以：

app.appRouter.on('route:dashboard', function(){
    app.dashboard = new DashboardView();
    app.dashboard.render();
    app.dashboard.delegateEvents();
)}

我很想知道这个解决方案是否有任何问题。

此致

backbone.js 为每个视图触发的常见事件

backbone.js common event triggered for every view

javascript

backbone.js