Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Ember Bootstrap Button Component
(function() {
"use strict";
var layout =
"{{yield}}" +
"{{currentText}}" +
"<span {{bind-attr class='iconClass loadingWhen:hide'}}></span>" +
"<span {{bind-attr class=':glyphicon :glyphicon-refresh loadingWhen:glyphicon-spin:hide'}}></span>";
App.BootstrapButtonComponent = Ember.Component.extend({
layout: layout,
tagName: 'button',
classNames: ['bootstrap-button', 'btn'],
classNameBindings: ['btnType', 'btnClass', 'disabled'],
attributeBindings: ['_type:type', 'data-toggle'],
_type: 'button',
// defaults
text: '',
type: 'default',
loadingWhen: false,
loadingText: Em.computed.defaultTo('text'),
disabledWhen: false,
disabledText: Em.computed.defaultTo('text'),
classTypePrefix: 'btn',
btnClass: '',
iconClass: '',
disabled: Em.computed.or('disabledWhen', 'loadingWhen'),
btnType: function() {
return [this.get('classTypePrefix'), this.get('type')].join('-');
currentText: function() {
return this.get('disabledWhen') ? this.get('disabledText') :
this.get('loadingWhen') ? this.get('loadingText') : this.get('text');
}.property('loadingWhen', 'disabledWhen'),
click: function() {
console.log('was clicked');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.