Backbone 视图在路由中重复触发的事件答案

【问题标题】：Backbone views events firing repeatedly in routesBackbone 视图在路由中重复触发的事件
【发布时间】：2016-06-12 10:06:02
【问题描述】：

我有一个backbonejs 应用程序，其中包含一个路由器文件和一些视图，而且我正在使用requirejs 将视图添加到路由并将模板添加到视图。这是我的代码：

routes.js

var AppRouter = Backbone.Router.extend({
routes: {
    "": "getLogin",
    "login": "getLogin",
    "register": "getRegister",
    "forget-password": "getForgetPassword"
},
getLogin: function() {
    require(['views/auth/loginView'], function(view) {
        view = new this.LoginView();
    });
},
getRegister: function() {
    require(['views/auth/registerView'], function() {
        view = new this.RegisterView();
    });
},
getForgetPassword: function() {
    require(['views/auth/forgetPasswordView'], function() {
        view = new this.ForgetPasswordView();
    });
},
});

var route = new AppRouter();
Backbone.history.start();

loginView.js

var LoginView = Backbone.View.extend({
el: '#wrapper',
initialize: function() {
    NProgress.start();
    this.render();
},
render: function() {
    require(['text!partials/auth/login.html'], function(t) {
        var json = { title: 'title', formName: 'frmLogin' };
        var template = _.template(t);
        $('#wrapper').html(template(json));
    });
    NProgress.done();
},
events: {
    "click #btnLogin": "login"
},
login: function(e) {
    e.preventDefault();
    alert('some message');
}
});

registerView.js 和 forgetPasswordView.js 也类似于 loginView.js。

现在！ 当我多次更改路线并点击#btnLogn 时，它会多次触发alert('some message'); 函数...！

【问题讨论】：

您的两种路由器方法中出现了意外的全局views。您正在创建绑定到#wrapper（IMO 的坏主意）的视图，而不是让视图创建并拥有自己的els。我看不到view.remove() 调用，所以你永远不会费心破坏你的视图，所以你有内存泄漏和僵尸视图。解决所有问题，然后重试。
@muistooshort 我认为你是对的......！让我试试看。
@muistooshort 你有什么建议？你能帮帮我吗？
@543310 您应该保留对已创建视图的引用。并让您在创建另一个之前删除现有的...

标签： backbone.js requirejs backbone-views backbone-events backbone-routing

【解决方案1】：

你试过un-delegating视图中的事件，改变路线吗？

您可以覆盖 AppRouter 中的 route 方法 (annotated source) 并在每条路线呈现之前运行它。

route: function(route, name, callback) {
    view.undelegateEvents();
    return Backbone.Router.prototype.route.apply(this, arguments);
}

注意：只是一个想法，未经您的代码测试

【讨论】：