Ember.js and bootstrap accordion - an "explicit way" to create a performance

Question

My question is not how to do bootstrap work, but trying to make sure that I understand the “ugly” way to do something.

I created a working bootstrap accordion example here (as of 3/12/2013): http://jsfiddle.net/nrionfx/s59fA/

DEBUG: ——————————- DEBUG: Ember.VERSION : 1.0.0-rc.1 DEBUG: Handlebars.VERSION : 1.0.0-rc.3 DEBUG: jQuery.VERSION : 1.9.1 DEBUG: ——————————- 

To make the accordion correct, I had to create an observer to view the controller.content array. If I didn’t do this, the accordion would not break when the elements were inserted, even if I put $ () in the didInsertElement collapse.

 App.IndexView = Em.View.extend templateName: 'index' contentObserver: ( -> Ember.run.next this, -> @.$('.collapse').collapse() ).observes('controller.content') 

Now it works, but my question is: Is this a suitable way to do this within ember, or should it be somewhere else, like calling didInsertElement?

---- Update ---- jsFiddle Final: http://jsfiddle.net/nrionfx/s59fA/16/

Answer 1

I would recommend wrapping your items in their own look. In this case, you can use the didInsertElement hook to trigger your logic.

So your rudders look like this:

 {{#each item in controller}} {{view App.ItemView contextBinding="item"}} {{/each}} 

Just move the current contents of your loop to this new template. The view will look something like this:

 App.ItemView = Em.View.extend templateName: 'item' didInsertElement: ( -> Ember.run.next this, -> @.$().collapse() ) 

I think that would be the most awesome approach. This seems better because the logic does not restart every time the contents of the controller are swapped. As you already said, the didInsertElement hook is the most suitable place for integration with third-party libraries.

Hint: This did not work when you put the logic in the didInsertElement hook of your IndexView, because at that time the contained collection was not yet displayed.

Answer 2

Is this a suitable way to do this within ember, or should it be somewhere else, like didInsertElement call?

Of course, a suitable place for this is through didInsertElement. As @mavilein noted, you can do this by creating a view for each child.

Another approach you might consider is to use the afterRender queue. For instance:

 App.IndexView = Em.View.extend templateName: 'index' contentObserver: ( -> Ember.run.next this, -> @.$('.collapse').collapse() ).observes('controller.content') 

Send @machty an excellent entry to the ember run loop or Run jquery at the end of the Ember.CollectionView display