title: ember.js and bootstrap accordion - the "ember way" of creating the view
body: <p>My question is not how to make a bootstrap accordion work, but to try to make sure that I understand the "ember" way of doing things. </p>
  
  <p>I've created a working example of a bootstrap accordion here (as of 3/12/2013):
  <a href="http://jsfiddle.net/nrionfx/s59fA/" rel="nofollow">http://jsfiddle.net/nrionfx/s59fA/</a></p>
  
  <pre><code>DEBUG: ——————————- 
  DEBUG: Ember.VERSION : 1.0.0-rc.1
  DEBUG: Handlebars.VERSION : 1.0.0-rc.3
  DEBUG: jQuery.VERSION : 1.9.1 
  DEBUG: ——————————-
  </code></pre>
  
  <p>To make the accordion collapse properly, I had to create an observer to watch the controller.content array. If I did not do this, the accordion did not collapse when the elements were inserted, even if I placed the $().collapse into the didInsertElement hook. </p>
  
  <pre><code>App.IndexView = Em.View.extend
      templateName: 'index'
      contentObserver: ( -&gt;
          Ember.run.next this, -&gt;
              @.$('.collapse').collapse()
        ).observes('controller.content')
  </code></pre>
  
  <p>Now, this works, but my question is: 
  Is this the appropriate way of doing this under the ember framework, or should this be somewhere else, such as the didInsertElement call?</p>
  
  <p>---- Update ---- 
  Final jsFiddle:
  <a href="http://jsfiddle.net/nrionfx/s59fA/16/" rel="nofollow">http://jsfiddle.net/nrionfx/s59fA/16/</a></p>