Question

我正在尝试在Backbone.js中为我的路由实现前置过滤器。我找到了以下代码here -

var MyRouter = Backbone.Router.extend({
    route: function(route, name, callback) {
        return Backbone.Router.prototype.route.call(this, route, name, function() {
            this.trigger.apply(this, ['beforeroute:' + name].concat(_.toArray(arguments)));
            callback.apply(this, arguments);
        });
    }
});

但是，我不确定接下来我需要做什么。我需要使用我想要的“路由前”逻辑来定义一个函数，但我不明白它将如何被调用。

Answer 1

重写的route函数会触发名为beforeroute:routename的事件，然后调用原始的route函数。所以如果你有这样的路线：

var MyRouter = Backbone.Router.extend({
    routes: { 
        "": "home"
    },
    // ...
});

然后您将使用以下方式订阅 beforeroute 事件：

var router = new MyRouter()

router.on("beforeroute:home", function() {

    // before route logic here...
    alert("Home route is about to get hit ...");
});

Fiddle demo.

Answer 2

仅仅因为像我这样的其他人感到困惑，为什么这不起作用。（再）从Backbone版本0.9.10开始，它似乎被打破了。（不知道为什么）

但是在版本1.0.0中，您现在可以使用函数文字而不是对方法的引用。 http://backbonejs.org/#changelog

所以你可以在致电路线之前做点什么......

routes: {
   'your-route' : function(){ if(yourCondition){ yourAction(); }}
}

Answer 3

另一种方法是扩展Router.route功能。下面是我需要做的一个例子（检查用户是否经过身份验证）。它基本上是原始的Backbone代码（1.0.0）加上我的自定义代码（标有注释）：

  Backbone.Router.prototype.route = function(route, name, callback) {
    if (!_.isRegExp(route)) route = this._routeToRegExp(route);
    if (_.isFunction(name)) {
      callback = name;
      name = '';
    }
    if (!callback) callback = this[name];
    // here my custom code
    callback = _.wrap(callback, _.bind(function(cb) {
      if (name == 'login' || sessionModel.authenticated()) {
        _.bind(cb, this)();
      } else {
        this.navigate('login', {trigger: true});
      }
    }, this));
    // finish my custom code
    var router = this;
    Backbone.history.route(route, function(fragment) {
      var args = router._extractParameters(route, fragment);
      callback && callback.apply(router, args);
      router.trigger.apply(router, ['route:' + name].concat(args));
      router.trigger('route', name, args);
      Backbone.history.trigger('route', router, name, args);
    });
    return this;
  };

注意_.wrap和_.bind所以this是您在使用路由器时所期望的那个。否则我得到一个“这是未定义的”错误。

Backbone.js - 使用beforeRoute过滤器扩展路由器

3 个答案: