Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Ember view for Bootstrap collapse component
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.')
})
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment