Ember transition & rendering complete event

Question

Is there any event fired stating the transition/rendering has completed (and the dom is visible/ready).

setupcontroller/activate are before the dom is built/rendered

didInsertElement gets fired only the first time when I've already inserted an element and I'm just switching the model out underneath it.

What I'm really looking for is the transition is complete event

I guess I can do this, but I was kind of hoping it was already built in...

Ember.Router.reopen({
  didTransition:function(infos) {
     this._super(infos);
     console.log('transition complete');  
  }
});

Even cooler would be a callback to the route that the transition completed for it, I may have to write this and submit a pull request.

Answer 1

There are a couple of different ways you can solve this

didInsertElement

This is fired when the view is inserted on the first time, but not fired if the model is switched out under the view (because Ember likes to reuse items, since it's cheaper than rebuilding the entire DOM). Example below.

Simple

If you only need to do it once, the first time the view is inserted, use didInsertElement

App.FooView = Em.View.extend({
  setupSomething: function(){
    console.log('the dom is in place, manipulate');
  }.on('didInsertElement')
});

Example: http://emberjs.jsbin.com/wuxemo/1/edit

Complex

If you need to schedule something after the DOM has been rendered from the route itself, you can use schedule and insert it into the afterRender queue.

App.FooRoute = Em.Route.extend({
  setupController: function(controller, model){
    this._super('controller', model);
    Ember.run.schedule('afterRender', this, function () {
      //Do it here
    });
  }
});

Example: http://emberjs.jsbin.com/wuxemo/2/edit

Transition promise

The transition's promise will complete before it's finished rendering items. But it gives you a hook for when it's done with fetching all of the models and controllers and hooking them up.

If you want to hook up to the transition event you can do it like so:

var self = this;
transitionTo('foo').then(function(){
    Ember.run.schedule('afterRender', self, function () {
          //Do it here
    });
})

Answer 2

The afterModel hook might work for you:

App.MyRoute = Ember.Route.extend({
  afterModel: function(model, transition) {
    transition.then(function() {
      // Done transitioning
    });
  }
});

I tested this using RC-7 with routes that both do and don't have dynamic segments (i.e., a route with a model and a route without a model). It seems to work either way.

See this JSBin for an RC-6 example:
  Output: http://jsbin.com/OteC/1/
  Source: http://jsbin.com/OteC/1/edit?html,js

Answer 3

setupController is the last thing that the Router calls before finalizing the transition. And if it completes without errors, as far as Ember is concerned the transition is complete. You actually see this in action by enabling LOG_TRANSITIONS_INTERNAL.

At that point, It doesn't matter if the controller has thrown an error, view has thrown an error, etc. The router has completed transitioning into the target route.

So setupController is the last place in terms of the Router that corresponds to didTransition.

When the content/model backing the controller changes on an existing View, the bindings kick in. Most of the changes that happen to the view at that point are via Metamorphing.

The closest place I can think of to hook into would be View.render which pushes changes into the RenderBuffer. But you still need to account for Metamorphing via mixins that happens here.

Answer 4

didTransition does exist as you hoped -- but its an action and not a hook

XXRouter
actions: {
    didTransition: function() {
        this.controller.set("hasTransitioned", true); // or whatever is needed?!
        return true; // Bubble the didTransition event
    },
}


XXController    
observeTransition: function() {
    alert('complete Transition');
}.observes('hasTransitioned'),