View Lifecycle > afterRender not working correctly


#1

I am trying to capture the width of a child view from within a view. From my research I have found that the proper way to do this is to use scheduleOnce inside of the views didInsertElement. This should ensure that all of the views children have loaded. This is not working, however. When i log out the width , it is 50 or so px less than it should be. every time. if I put a 50 ms settimeout, the width will log out correct. Below is the pattern I am using.

App.MyCollectionView = Ember.CollectionView.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
  },
  processChildElements: function() {
    var el = this.get('element');
    var childWidth = $(el).find('.childElement').width();
  }
});

#2

That setup works correctly for a regular Ember.View. For a CollectionView, use this to determine when all the child views of the collection are finished rendering:

App.MyCollectionView = Ember.CollectionView.extend({
    didInsertChildElements: function() {
      Ember.run.scheduleOnce('afterRender', this, this.onAllChildrenRendered);
    }.observes('[]').on('init'),

    onAllChildrenRendered: function() {
      // do what you want here
    }
});

#4

I’m Sorry that was a bad copy/paste job. Im actually having this problem on a component. not really sure how different they are from views/collectionviews from a lifecycle perspective.


#5

Component is a subclass of view and should behave the same from this perspective