Question

我有一个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');功能......！

Answer 1

您是否在路线更改时尝试了un-delegating视图中的事件？

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

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

注意：只是一个想法，没有使用您的代码进行测试

Backbone查看在路由中重复触发的事件

1 个答案: