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