How to run an action on every route transition in ember?

Question

I have an Ember application with several routes and I want to scroll the page to top every time the user makes a transition. The problem is that I don't want to duplicate the same code on every route's didTransitionmethod.

So, Is there a way that I can observe all routes transitions and execute (declare) an action in just one place ?

Another way to put put this: If I have a parent route, can I fire the same action to all of its children ?

My current solution is to fire the action on every route's didTransition method like this:

//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");
 }

Is there a way to do this ?

PS:. I am using Ember version 2.14.0

Gennady Dogaev Gennady Dogaev · Accepted Answer · 2018-06-18T14:39:41

You can try to define didTransition action on application route. If child route does not define handler for event, it should bubble up to parent route and application is a most top route.

Alternatively, you can create a mixin with didTransition action, and add that mixin to certain routes.

Also, looking at your code I think you might be interested in using liquid-fire addon (if your goal is animated transitions)

How to run an action on every route transition in ember?

2 Answers