Ember transition & rendering complete event

There are a couple of different ways you can solve this


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.


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

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


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;
    Ember.run.schedule('afterRender', self, function () {
          //Do it here

Leave a Comment