title: Using ember.js, how do I get notified when a CollectionView is re-rendered?
body: <p>Let's say I've a <code>CollectionView</code> in ember.js.</p>
  
  <p>Initially, lets say the <code>content</code> property is bound to an array which had a few elements. The CollectionView would render those elements, and once they are in the DOM, <code>didInsertElement</code> shall be called, firstly for each of the childViews, and finally for the <code>CollectionView</code> itself.</p>
  
  <p>Let's suppose <code>content</code> changes (e.g. new items added, or array replaced entirely). The <code>CollectionView</code> would append new children, or replace the children altogether. The DOM is accordingly updated. But there's no <code>didInsertElement</code> called for the <code>CollectionView</code>.</p>
  
  <p>I want to run some custom JS after all the changes to the DOM have been made. Something like a didRerenderElement or didUpdateElement hook.</p>
  
  <p><strong>What have I tried but doesn't work?</strong></p>
  
  <ol>
  <li>I can't put this code in <code>didInsertElement</code> of CollectionView, because that is not fired each time the array changes and DOM updates.</li>
  <li>I tried observing <code>content</code>, but the observer would always fire <em>before</em> actual DOM update happens.</li>
  <li>I tried observing <code>childViews</code>, but the case is similar.</li>
  </ol>
  
  <p>One obscure solution that worked for me was this:</p>
  
  <pre><code>App.MyCollectionView = Ember.View.extend({
    childrenReady: 1, // anything, value doesn't matter
  
    itemViewClass: Ember.View.extend({
      didInsertElement: function () {
        this.get('parentView').notifyPropertyChange('childrenReady');
      }
    }),
  
    childrenGotReady: function () {
      if (this.get('childViews').everyProperty('state', 'inDOM')) {
        // run that custom JS code here (e.g. apply jQuery masonry to the elements)
      }
    }.observes('childrenReady')      
  
  });
  </code></pre>
  
  <p>But this is too obscure, and prone to other issues as well.</p>
  
  <p>I've read this: <a href="https://stackoverflow.com/questions/12119561/how-can-i-run-code-any-time-part-of-an-ember-view-is-rerendered">How can I run code any time part of an Ember view is rerendered?</a> but that doesn't apply to <code>CollectionView</code>s.</p>
  
  <p>I'm running into this in many parts in my app, and I really expect emberjs to have a standard way for this.</p>