Understanding Router `didTransition` event


#1

I am trying to execute code every time the User changes the page.

I am reading the Router.didTransition event documentation, and I try to add it to my Router:

# app/router.js
const Router = Ember.Router.extend({
  actions: {
    didTransition() {
      console.log("DEBUG2: Router.didTransition");
      return true;
    }
  }
});

And it doesn’t work, I don’t see anything in console neither when I load the page first time neither when I move to another route.

I try other things:

# app/router.js
const Router = Ember.Router.extend({
  location: config.locationType,

  actions: {
    didTransition() {
      console.log("DEBUG2: Router.didTransition");
      return true;
    },
    willTransition(transition) {
      console.log("DEBUG2: Router.willTransition");
      return true;
    }
  },

  doSomethingOnUrlChange2: function() {
    console.log("DEBUG2: Router.doSomethingOnUrlChange2");
  }.on('didTransition'),

  doSomethingOnUrlChange3: Ember.on('didTransition', function() {
    console.log("DEBUG2: Router.doSomethingOnUrlChange3");
  })
});

Ember.Router.reopen({
  doSomethingOnUrlChange1: function() {
    console.log("DEBUG2: Router.doSomethingOnUrlChange1");
  }.on('didTransition')
});

Then I see in the log the below lines:

DEBUG2: Router.doSomethingOnUrlChange
DEBUG2: Router.doSomethingOnUrlChange3
DEBUG2: Router.doSomethingOnUrlChange2

In the first load and in every route change.

So my question is: what is wrong with my first approach?, what haven’t I understood from the documentation?


#2

didTransition and willTransition hooks are not actions (as in your example), they are class level methods (same as yours doSomethingOnUrlChange2)?


#3

I see. I made the stupid mistake of confusing Route.didTransition doc with Router.didTransition doc

:penguin:

In the other hand it is not intuitive for a newer to extrapolate from the Router doc that there is the possibility to implement hooks as I did in my example.