An approach to Bootstrap Modals in EmberJS using Mixins

index.js

import Ember from 'ember';
import ModalSupport from '../mixins/modal-support';

export default Ember.Controller.extend(ModalSupport, {

  actions: {
    tryModal: function() {
      var _this = this;
      _this.modalFor({template: 'some-template', 
                      title: 'Some Title'})
        .then(function(){
          console.log('action ok was clicked');
        })
        .catch(function() {
          console.log('action cancel was clicked');
        });
    }
  }
});

modal-support.js

import Ember from 'ember';

export default Ember.Mixin.create({
  modal: null,
  okDecision: null,
  cancelDecision: null,
  okDisabled: false,
  cancelDisabled: false,
  title: '',
  okLabel: '',
  cancelLabel: '',

  toggleOk: function() {
    this.toggleProperty('okDisabled');
  },

  toggleCancel: function() {
    this.toggleProperty('cancelDisabled');
  },

  modalFor: function(options) {
    this.set('title', options.title || '');
    this.set('okLabel', options.okLabel || 'Confirmar');
    this.set('okDisabled', options.okDisabled || false);
    this.set('cancelLabel', options.cancelLabel || 'Cancelar');
    this.set('cancelDisabled', options.cancelDisabled || false);
    var modal = this.container.lookup('view:modal');
    modal.set('controller', this);
    modal.set('templateName', options.template);
    modal.append();
    var self = this;
    self.set('modal', modal);
    return new Ember.RSVP.Promise(function(resolve, reject) {
      self.set('okDecision', resolve);
      self.set('cancelDecision', reject);
    });
  },

  disposeModal: function() {
    this.get('modal').hide();
    this.set('okDecision', null);
    this.set('cancelDecision', null);
    this.set('modal', null);
  },

  actions: {
    okAction: function() {
      this.get('okDecision')();
      this.disposeModal();
    },
    cancelAction: function() {
      this.get('cancelDecision')();
      this.disposeModal();
    }
  }

});

modal.hbs

<div class="modal fade" id="modal-id">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" {{action 'cancelAction'}}>&times;</button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <div class="modal-body">
        {{yield}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" {{action 'cancelAction'}} {{bind-attr disabled=cancelDisabled}}>{{cancelLabel}}</button>
        <button type="button" class="btn btn-primary" {{action 'okAction'}} {{bind-attr disabled=okDisabled}}>{{okLabel}}</button>
      </div>
    </div>
  </div>
</div>

modal.js

import Ember from 'ember';

export default Ember.View.extend({
  layoutName: 'modal',
  hide: function() {
    this.$('.modal').modal('hide');
  },
  show: function() {
    this.$('.modal').modal({backdrop:'static'}).on('hidden.bs.modal', function() {
      this.destroy();
    }.bind(this));
  }.on('didInsertElement')
});

I really like this approach, especially with a Promise return, that allows to use this modal with transitions as polyfill for beforeunload event.