Using Bootstrap-modal As Backbone.js View

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 of the view. Unfo

Solution 1:

Allright, so the solution is was rather simple:

App.Views.ProjectsNav ||= {}

classApp.Views.ProjectsNav.NewProjectViewextendsBackbone.ViewtagName: 'div'events: {
    'click .save':   'save',
    'click .cancel': 'hide',
    'hidden':        'hidden',
    'shown':         'shown'
  }

  initialize: (options) ->
    super(options)
    @collection = options.collectionhide: () ->
    @el.modal(true).hide()
    falsesave: (e) ->
    ...
    @model.save(attrs, {
      success: (project) =>@model = project
        @collection.add(@model)
        @hide()
      error: (project) =>alert('Something went wrong: ' + project)
      }
    )
    falserender: () ->
    @el = ich.nav_edit_project_template(@model.toJSON()).modal('keyboard': true, 'backdrop': true)
    @delegateEvents()
    @el.modal('show': true)
    @

  hidden: () ->
    @remove()
    falseshown: () ->
    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.