backbone.js为每个视图触发的公共事件

时间:2015-01-05 10:25:52

标签: javascript backbone.js

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

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

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没有成功。

首先,这是我应该解决的问题吗?如果是这样,我该怎么做呢?

干杯

2 个答案:

答案 0 :(得分:0)

Backbone使用jquery&#39; on来注册DOM事件 实例化4个视图时,如果4个事件侦听器都定义了相同的父元素,则它们将绑定到同一个元素。

就个人而言,我倾向于使用window.location.href创建重定向,如果我当前在需要身份验证的页面中。如果我在一个不需要身份验证的页面中,我只需重新呈现标题,用login(/ register)按钮替换用户名。

答案 1 :(得分:0)

我想我找到了解决方案。

在我正在调用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();
)}

我很想知道此解决方案是否存在任何问题。

此致