Ember.js modal

modal.js.coffee

MB.ModalHeaderView = Ember.View.extend({
  classNames: ["modal-header"]
  contentBinding: "parentView.content"
  titleBinding: "parentView.title"
  defaultTemplate: Ember.Handlebars.compile("""
    <a href="#" {{action close target="view.parentView"}} class="close">x</a>
    <h3>{{view.title}}</h3>
  """)
})

MB.ModalFooterView = Ember.View.extend({
  classNames: ["modal-footer"]
  contentBinding: "parentView.content"
  defaultTemplate: Ember.Handlebars.compile('the footer')
})

MB.ModalBodyView = Ember.View.extend({
  classNames: ["modal-body"]
  contentBinding: "parentView.content"
  defaultTemplate: Ember.Handlebars.compile('the body')
})

MB.ModalView = Ember.ContainerView.extend({
  classNames: ["modal"]

  childViews: (() ->
    [@get('headerView'), @get('bodyView'), @get('footerView')].compact()
  ).property('headerView', 'bodyView', 'footerView')

  title: "Default Title"
  hasCloseButton: true

  headerView: MB.ModalHeaderView
  bodyView:   MB.ModalBodyView
  footerView: null # don't default to having a footer

  close: (e) ->
    e.preventDefault()
    @destroy()

});

MB.ModalView.reopenClass({
  display: (options={}) ->
    modal = @create(options)
    modal.append()
    modal
})

usage.js.coffee

MB.MyModalView = MB.ModalView.extend({

  bodyView: MB.ModalBodyView.extend({
    templateName: "templates/modals/some-template"
  })

})