主干.js每个视图触发的常见事件

backbone.js common event triggered for every view

本文关键字：常见 事件 视图 js 主干      更新时间：2023-09-26

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

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

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 次。

我已经尝试了几种方法来解决这个问题，例如在视图更改时取消绑定视图并设置元素但没有成功。

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

干杯

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

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

我想

我已经找到了解决方案。

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

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

在应用程序中.js在应用程序路由器函数中，我调用this.DashboardView.delegateEvents();：

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

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

问候

相关文章：