Ember transition & rendering complete event

by

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

Leave a Comment

tech