Search code examples
ember.jsember-router

Detect route transitions in EmberJS 1.0.0-pre.4


I am trying to detect when a route transition occurs. I've located this code snippet inside the latest version of Ember (v1.0.0-pre.4) that handles the transitions:

  didTransition: function(infos) {
    // Don't do any further action here if we redirected
    if (infos[infos.length-1].handler.transitioned) { return; }

    var appController = this.container.lookup('controller:application'),
        path = routePath(infos);

    set(appController, 'currentPath', path);
    this.notifyPropertyChange('url');

    if (get(this, 'namespace').LOG_TRANSITIONS) {
      Ember.Logger.log("Transitioned into '" + path + "'");
    }
  },

I set up my Ember application as window.App = Ember.Application.create().

I noticed that it calls this.notifyPropertyChange('url');, but I tried to attach an observer to my application App.Router or App.Router.router, I get an error because it does not implement Ember.Observable.

How can I detect when the route path is changed without creating a special Ember.Route for each of my routes?


Solution

  • UPDATED ANSWER

    You can now simply bind an observer on the router's didTransition event:

    App.Router.reopen({
      doSomethingOnUrlChange: function() {
        console.log(this.get('url'));
      }.on('didTransition')  
    });
    

    see working example: http://jsfiddle.net/Sly7/3THD7/

    DEPRECATED ANSWER BELOW

    In the snippet here, there is set(appController, 'currentPath', path); I think you can put an observer on this property.

    I don't know exactly where you want to be notified, but it's possible to do it in the ApplicationController itself.

    App.ApplicationController = Ember.Controller.extend({
    
      currentPathDidChange: function(){
        // the currentPath has changed;
      }.observes('currentPath');
    });
    

    See this working fiddle for example: http://jsfiddle.net/qKrwU/