Ember.js route hook to be called on every transition

Question

Is there a route hook in Ember.js that is called on every transition, even if the new route is the same as the old route (for example, clicking a top-level navigation link to the same route).

I tried activate, but it's only being called once, and is not being called again when I use the top-level navigation to go to the same route I'm already in.

Example jsFiddle: When I click "Test" the first time, the activate hook is called, but when I click it a second time, it does not.

Muncey

var App = Ember.Application.create({LOG_TRANSITIONS: true }); ?? – Stearne

@kristjanreinhold That's for debugging. – Muncey

Answer 1

You can setup a didTransition in the router, exactly how Ember does it for Google Analytics.

App.Router.reopen({
 doSomething: function() {
    // do something here
    return;
  }.on('didTransition')
});

See example here: http://emberjs.com/guides/cookbook/helpers_and_components/adding_google_analytics_tracking/

UPDATE: (new link since old is broken) https://guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/adding_google_analytics_tracking/

Boardman

Great solution! Works on Ember 1.13.x – Leathers

See also this nice syntax for adding didTransition to a router's actions hash: emberjs.com/api/classes/Ember.Route.html#event_didTransition – Interrogative

guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/… Pin down ember guide's version – Law

Nice one mate. Few years after OP looking into the same thing, and this might just have pointed me in the right direction! Thanks – Caressive

Answer 2

Activate is not being called a second time because This hook is executed when the router enters the route... And when you click on that link-to a second time, the router isn't doing anything... As in, no transition is being made (although it is "attempted").

http://emberjs.com/api/classes/Ember.Route.html#method_activate

The method that I have found to work best is observing the currentPath from within a controller. I use this for animations between routes.

In your application controller you can do something like the following:

currentPathChange: function () {
  switch(this.get('currentPath')){
    case 'test.index':
      this.doSomething();
      break;
    case 'test.new':
      this.doSomethingElse();
      break;
  }
}.observes('currentPath')

You should be able to access almost any part of your app from the application controller, so it's a nice "root hook," I suppose.

Example: http://jsfiddle.net/mattblancarte/jxWjh/2/

Zacheryzack

This does not work either. Try clicking the same link twice in a row, you will only get one alert. – Muncey

@Muncey if you click the same link twice, you aren't transitioning... Does that make sense? If you watch the transition log, you'll see "Attempting transition to..." and then nothing. – Zacheryzack

This will work, however, if you are transitioning between child and parent routes within the same resource, which I think is what you would want. – Zacheryzack

By definition, the "old route" and the "new route" must be different, otherwise there is no transition. There is clicking, sure. If you want fancy clicking behavior, bind it to your controller. – Robber

this happens after transition. before would also be helpful – Accipitrine

Answer 3

Did you already consider the hook willTransition?

http://emberjs.com/guides/routing/preventing-and-retrying-transitions/

App.SomeRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition) {
      // do your stuff
    }
  }
});

Codicodices

No, it does not get called when the new route is the same as the old route. – Muncey

Then you would have to do a hack and pass arbitrary values to your transition so that the model of the Route changes. But it seems really awkward that you need to perform some action although nothing actually happened when the click happened? – Codicodices

@Codicodices The activate method doesn't observe model changes so that wouldn't even help. :( – Zacheryzack

Answer 4

Alter/Hack EmberJS code and add a jQuery event trigger inside the doTransition() Function. This is Best but kind of defeating the point.

As of today, 1 year later and Ember 2.0 kind of out, there is NO OTHER WAY :(

Ember does not provide a way to track route-change attempts! This includes URLattemts(history), link-to attempts, hash change attempts etc..

Gianina

It's open source, so feel free to issue a PR. – Pineapple