I’ve finally nailed down the twitter bootstrap accordion with ember.js rendered templates.
The full example is at: http://jsfiddle.net/nrionfx/s59fA/16/
The stack overflow discussion: http://stackoverflow.com/questions/15362405/ember-js-and-bootstrap-accordion-the-ember-way-of-creating-the-view/15362911#15362911
The ember details:
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
The answer provided by @mavilein gave me almost everything I needed to get the jsfiddle working.
I wanted to use the view-based structure that the discussion led to, but I ran into an issue that took me a few days to track down. The individual accordion groupings would open or close just fine, but it would not collapse the other groups.
I finally tracked the issue down to the view helper inserting its own div . It would insert a div inside the accordion parent div, but outside of the accordion-group div for each item.
To resolve this, I removed the accordion-group div from handlebar template and added it to the view definition.
App.AccItemView = Em.View.extend
Ember.run.next this, ->
When the item views get rendered into the parent template, they call the runloop to setup the accordion.
Another option would have been to use the after-render queue on these item views as well. I think it ultimately ends up doing the same thing. However, if you are using ajax to populate the items, and you call the afterRender queue on the parentView, it does not wait for the child items to be rendered.
The details below can be implemented in the AccItemView’s didInsertElement hook.
Ember.run.scheduleOnce 'afterRender', this, () ->
And helpful links thanks to @MattGrass0tti on stackoverflow.
Check out @machty’s excellent post on the ember run loop or Run jquery at the end of Ember.CollectionView rendering