Pace 和 ember，如何在不重复代码的情况下让它在所有路线上工作

Question

我正在使用 ember 配速加载功能。

步速：http://github.hubspot.com/pace/docs/welcome/

在我的代码中，我在每条路线中重复此操作，以便显示加载栏：

App.IndexRoute = Ember.Route.extend({
  activate: function() {
    this._super();
    return Pace.restart();
  },
  deactivate: function() {
    this._super();
    return Pace.stop();
  }
});

App.AboutRoute = Ember.Route.extend({
    activate: function() {
    this._super();
    return Pace.restart();
  },
  deactivate: function() {
    this._super();
    return Pace.stop();
  }
});

有什么办法可以不在每条路由中重复代码？谢谢！

Answer 1

您可以通过执行以下操作覆盖所有路线：

Ember.Route.reopen({
  activatePace: function() {
    return Pace.restart();
  }.on('activate'),
  deactivatePace: function() {
    return Pace.stop();
  }.on('deactivate')
});

此外，这不会干扰现有的 activate/deactivate 挂钩，因此您不必调用 this._super()

查看有关重新开放的文档here

Answer 2

我建议创建 Mixin 或使用 Ember 的加载路径。

因此在您的情况下，Mixin 将按如下方式工作：

App.PaceLoader = Ember.Route.extend({
  activate: function() {
    this._super();
    return Pace.restart();
  },
  deactivate: function() {
    this._super();
    return Pace.stop();
  }
});

然后将它包含在您希望它工作的每条路线中：

App.AboutRoute = Ember.Route.extend(App.PaceLoader, {
  //the rest of your route code here...
});

我以前没有用过 Pace，但您可以将它添加到 Ember 不太明显的加载路径（我不相信他们已经记录了它...），在每个转换中使用：

App.LoadingRoute = Ember.Route.extend({
  activate: function() {
    this._super();
    return Pace.restart();
  },
  deactivate: function() {
    this._super();
    return Pace.stop();
  }
});

如果可行，您就不必将其包含在任何其他路由中。 :)

Pace 和 ember，如何在不重复代码的情况下让它在所有路线上工作

Pace and ember, how do I make it work in all routes without repeating code

javascript

ember.js