CODEWITHSUNDEEP
ember.js
user391986
user391986

Reputation: 30906

Run jquery at the end of Ember.CollectionView rendering

I have a ContainerView which contains a CollectionView. After this CollectionView renders on the screen I need to perform a jquery function which essentially looks through the content of the rendered template and performs some display modifications.

If I perform that jquery within the didInsertElement of CollectionView it works but it gets executed for every single element in the CollectionView where as I really just need it to be done once at the end. How do I specify that?

http://jsfiddle.net/JFqNr/ (note doesn't render on jsfiddle or some reason but just to show you 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();
​

Upvotes: 2

Views: 897

Answers (1)

Bradley Priest
Bradley Priest

Reputation: 7458

The functionality to do this has only very recently been added to the master branch, so you will need to be compile your own version of Ember.
You can now schedule into an afterRender queue to run after all the individual views have been rendered.

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 code details.

Upvotes: 4

Related Questions