Run jquery at the end of the Ember.CollectionView display

Question

I have a ContainerView that contains a CollectionView . After the CollectionView appears on the screen, I need to execute the jquery function, which basically looks at the contents of the rendered template and makes some modifications to the display.

If I execute this jquery inside didInsertElement from CollectionView , it works, but it runs for every single element in CollectionView , where, as I really just need it to be done once at the end. How to indicate this?

http://jsfiddle.net/JFqNr/ (note is not displayed on jsfiddle or for any reason, it just shows you the structure)

App = Ember.Application.create(); App.FooContainerView = Ember.ContainerView.extend({ childViews: ['elementList'], elementList: Ember.CollectionView.extend({ content: function() { return [ { Title: "Dashboard", ID: "dashboard" }, { Title: "Invoices", ID: "invoices" }, { Title: "Expenses", ID: "expenses" }, { Title: "People", ID: "people" }, { Title: "Reports", ID: "reports" }, { Title: "Settings", ID: "settings" } ]; }.property(), template: Ember.Handlebars.compile( '{{view.content.title}}' ), didInsertElement: function() { // perform jquery function } }), didInsertElement: function() { // does not work if perforemed here } }); App.initialize(); ​ 

Answer 1

Functionality for this has only recently been added to the main branch, so you will need to compile your own version of Ember.
Now you can schedule the afterRender queue to run after all the individual views are displayed.

 App.FooContainerView = Ember.ContainerView.extend({ // Existing code didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this, function(){ // perform jQuery function here; }); } 

See https://github.com/emberjs/ember.js/pull/1528 for more details on the code.