Using bootstrap-modal as Backbone.js view

Question

I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone\'s automatic event delegation via the events attribute

Answer 1

Allright, so the solution is was rather simple:

App.Views.ProjectsNav ||= {}

class App.Views.ProjectsNav.NewProjectView extends Backbone.View
  tagName: 'div'

  events: {
    'click .save':   'save',
    'click .cancel': 'hide',
    'hidden':        'hidden',
    'shown':         'shown'
  }

  initialize: (options) ->
    super(options)
    @collection = options.collection

  hide: () ->
    @el.modal(true).hide()
    false

  save: (e) ->
    ...
    @model.save(attrs, {
      success: (project) =>
        @model = project
        @collection.add(@model)
        @hide()
      error: (project) =>
        alert('Something went wrong: ' + project)
      }
    )
    false

  render: () ->
    @el = ich.nav_edit_project_template(@model.toJSON()).modal('keyboard': true, 'backdrop': true)
    @delegateEvents()
    @el.modal('show': true)
    @

  hidden: () ->
    @remove()
    false

  shown: () ->
    App.Helpers.Forms.setFocus($(@el), true)
    false

Summing things up, the key is to split showing the modal into two steps giving the possibility to assign @el and invoke @delegateEvents() afterwards before making it visible. @el.modal(true) can be used to get access to the object controlling the modal, e.g., to programmatically hide it.