Ember view for Bootstrap collapse component

accordion_view.js

define(['main/config'], function (config) {

  App.AccordionItemView = Ember.View.extend({
      classNames: ['accordion-group'],
      parentId: null,
      parentRef: function() {
          var hasGroupControl = this.get('parentView.hasGroupControl');
          return (hasGroupControl) ? "#" + this.get('parentId') : "";
        }.property('parentId'),
      internalId: null,
      internalRef: function () {
          return '#' + this.get('internalId');
      }.property('internalId'),
      template: Ember.Handlebars.compile([
        '  <div class="accordion-heading">',
        '    <a class="accordion-toggle" data-toggle="collapse" {{bindAttr data-parent="view.parentRef"}} {{bindAttr href="view.internalRef"}}>',
        '     {{view view.titleView}}',
        '    </a>',
        '  </div>',
        ' <div {{bindAttr id="view.internalId"}} {{bindAttr class=":accordion-body :collapse parentView.startsCollapsed::in"}}>', 
        '   <div class="accordion-inner">',
        '      {{view view.contentView}}',
        '    </div>',
        '  </div>'].join("\n")),
      titleView: Ember.View.extend({
        template: Ember.Handlebars.compile('This class is not meant to be used directly, but extended.')
      }),
      contentView: Ember.View.extend({
        template: Ember.Handlebars.compile('This class is not meant to be used directly, but extended.')
      }),
      didInsertElement: function() {
        this.set('internalId', this.get('elementId') + "inner");
        this.set('parentId', this.get('parentView.elementId'));
      }
  });

    App.AccordionView = Ember.CollectionView.extend({
        classNames: ['accordion'], 
        hasGroupControl: true,
        startsCollapsed: true,
        itemViewClass: App.AccordionItemView,
        emptyView: Ember.View.extend({
          template: Ember.Handlebars.compile('This class is not meant to be used directly, but extended.')
        })
    });
});