Ember Bootstrap Button Component

bootstrapButtonComponent.js

(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('-');
        }.property('type'),
    
        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');
            this.sendAction();
        }
    });
}());