Ember Modal Bootstrap Pane with layout

gistfile1.js

var get = Ember.get;

var modalPaneBackdrop = '<div class="modal-backdrop"></div>';

App.ModalPane = Ember.View.extend(Ember.TextSupport, {
  layoutName: "shared/modal_pane",
  classNames: 'modal',
  heading: null,
  message: null,
  primary: null,
  secondary: null,
  showBackdrop: true,
  isModalInParent: false,
  autoFocus: true,
  destroyOnClose: true, // Set to false when using this as the view of a state manager
  headerViewClass: Ember.View.extend({
    tagName: 'h3',
    template: Ember.Handlebars.compile('{{parentView.heading}}')
  }),
  primaryClassNames: function(){
    var classNames = ['btn', 'btn-primary'];
    if (this.get('primaryDisabled'))
      classNames.push('disabled');
    return classNames.join(" ");
  }.property('primaryDisabled'),
  secondaryClassNames: function(){
    var classNames = ['btn', 'btn-secondary'];
    if (this.get('secondaryDisabled'))
      classNames.push('disabled');
    return classNames.join(" ");
  }.property('secondaryDisabled'),

  didInsertElement: function() {
    if (get(this, 'showBackdrop')) this._appendBackdrop();
    if (get(this, 'autoFocus')){
      this.focusDialog();
    }
    this._setupDocumentKeyHandler();
  },

  focusDialog: function(){
    this.$('input[type=text],textarea').first().focus();
  },

  willDestroyElement: function() {
    if (this._backdrop) this._backdrop.remove();
    this._removeDocumentKeyHandler();
  },

  insertNewline: function(event){
    this._triggerCallbackAndDestroy({ primary: true }, event);
  },

  keyPress: function(event) {
    if (event.keyCode === 27) {
      this._triggerCallbackAndDestroy({ close: true }, event);
    }
  },

  click: function(event) {
    var target = $(event.target),
        targetRel = target.attr('rel');
    if (targetRel === 'close') {
      this._triggerCallbackAndDestroy({ close: true }, event);
    } else if (targetRel === 'primary') {
      this._triggerCallbackAndDestroy({ primary: true }, event);
    } else if (targetRel === 'secondary') {
      this._triggerCallbackAndDestroy({ secondary: true }, event);
    }
  },

  _appendBackdrop: function() {
    var parentLayer = this.$().parent(),
        backdrop = $(modalPaneBackdrop);
    if (this.get('isModalInParent')) {
      backdrop.addClass('is-modal-in-parent');
    }
    this._backdrop = backdrop.appendTo(parentLayer);
  },

  _setupDocumentKeyHandler: function() {
    var cc = this,
        handler = function(event) {
          cc.keyPress(event);
        };
    jQuery(window.document).bind('keyup', handler);
    this._keyUpHandler = handler;
  },

  _removeDocumentKeyHandler: function() {
    jQuery(window.document).unbind('keyup', this._keyUpHandler);
  },

  _triggerCallbackAndDestroy: function(options, event) {
    if (this.callback) this.callback(options, event);
    if (get(this, 'destroyOnClose')){
      this.destroy();
    }
    event.preventDefault();
  }
});

App.ModalPane.reopenClass({
  popup: function(options) {
    var modalPane;
    if (!options) options = {};
    modalPane = this.create(options);
    modalPane.append();
    return modalPane;
  }
});

modal_pane.handlebars

{{#if heading}}
<div class="modal-header">
  <a href="#" class="close" rel="close">×</a>
  {{view headerViewClass}}
</div>
{{/if}}
<div class="modal-body">
  {{# if message }}
    {{{message}}}
  {{else}}
    {{yield}}
  {{/if}}
</div>
<div class="modal-footer">
  {{#if primary}}
    <a href="#" {{bindAttr class="primaryClassNames"}} rel="primary">{{primary}}</a>
  {{/if}}
  {{#if secondary}}
    <a href="#" {{bindAttr class="secondaryClassNames"}} rel="secondary">{{secondary}}</a>
  {{/if}}
</div>