如何在 ember 中对每个路由转换运行一个操作？

Question

我有一个带有多个路由的 Ember 应用程序，我想在每次用户进行转换时将页面滚动到顶部。问题是我不想在每条路由的didTransitionmethod 上复制相同的代码。

那么，有没有一种方法可以让我观察所有路线转换并在一个地方执行（声明）一个动作？

换一种说法：如果我有一个父路由，我可以向它的所有子路由触发相同的操作吗？

我目前的解决方案是在每条路线的 didTransition 方法上触发操作，如下所示：

//router.js
Router.map(function() {
  this.route('login');
   this.route('portal',{ path:'/'}, function() {
      this.route('clientes');
      this.route('convite');
      this.route('usuario', function() {
      this.route('view', { path: '/:id' });
  });
 });

 //everyChildren.route.js
 didTransition(){
   this.super(...arguments);
   Ember.$("html, body").animate({ scrollTop: 0 }, "slow");
 }

有没有办法做到这一点？

PS：。我正在使用 Ember 版本 2.14.0

Answer 1

您可以尝试在application 路由上定义didTransition 操作。如果子路由没有定义事件处理程序，它应该冒泡到父路由，application 是最顶级的路由。

或者，您可以使用didTransition 操作创建mixin，并将该mixin 添加到某些路由。

另外，查看您的代码，我认为您可能对使用 liquid-fire 插件感兴趣（如果您的目标是动画过渡）

Answer 2

使用ember-router-scroll。

这个插件做你想做的事