Question

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

我遇到的问题是每次加载的视图都会触发“注销”按钮。我为常见的视图事件创建了一个基类：

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＆＃39; on来注册DOM事件实例化4个视图时，如果4个事件侦听器都定义了相同的父元素，则它们将绑定到同一个元素。

就个人而言，我倾向于使用window.location.href创建重定向，如果我当前在需要身份验证的页面中。如果我在一个不需要身份验证的页面中，我只需重新呈现标题，用login（/ 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为每个视图触发的公共事件

2 个答案: