Backbone.js - 触发路由之前/之后的调用方法

Question

我希望在我的Backbone.js路由器中分别触发路由之前和之后调用setup/teardown方法.有人创造了一种优雅的方式吗？

Answer 1

_.wrap不是一个解决方案,如果您有20个路由,则必须将它们全部包装起来.

但你可以用元编程来做到这一点

class Backbone.FlexRouter extends Backbone.Router
  route: (route, name, handler) ->
    super route, name, ->
      @trigger "route:before"
      handler()
      @trigger "route:after"

UPD:我相信JS应该是这样的(但我没有测试过)

var rp = Backbone.Router.prototype
rp.routeWithoutEvents = rp.route
rp.route = function(route, name, handler){
  var that = this
  this.routeWithoutEvents(route, name, function(){
    that.trigger("route:before")
    handler()
    that.trigger("route:after")
  })
}

Answer 2

你考虑过_.wrap吗？

Answer 3

这是一个简单的,覆盖Backbone.Router本身

(function () {
    _.extend(Backbone.Router.prototype, Backbone.Events, {        
        route: function (route, name, callback) {           
            if (!_.isRegExp(route)) route = this._routeToRegExp(route);
            if (!callback) callback = this[name];
            Backbone.history.route(route, _.bind(function (fragment) {               
                var args = this._extractParameters(route, fragment);                
                if (this.before && _.isFunction(this.before)) {
                    this.before(fragment);
                }                
                callback && callback.apply(this, args);
                this.trigger.apply(this, ['route:' + name].concat(args));
                if (this.after && _.isFunction(this.after)) {
                    this.after(fragment);
                }
                Backbone.history.trigger('route', this, name, args);
            }, this));
            return this;
        }
    });
}).call(this);

专注于线条

if (this.before && _.isFunction(this.before)) {
    this.before(fragment);
}

和

if (this.after && _.isFunction(this.after)) {
    this.after(fragment);
}

您可以根据需要修改线条

这是使用新的Backbone.Router类的客户端代码

var appRouter = Backbone.Router.extend({

routes: {},
before: function(){
   //your code here
   return true;
}

});