Uso de bootstrap-modal como vista Backbone.js

Question

Estoy intentando crear una vista de Backbone.js basada en una rutina de arranque de Twitter, que hace uso de la delegación automática de eventos del Backbone a través del atributo events de la vista.

Desafortunadamente, arranque-modal parece romper delegación de eventos de la espina dorsal, ya que clona la vista HTML antes de mostrar el modal:

that.$element 
     .appendTo(document.body) 
     .show() 

Mi opinión:

App.Views.ProjectsNav ||= {} 

class App.Views.ProjectsNav.NewProjectView extends Backbone.View 
    events: { 
    'click .save': 'save', 
    'shown':  'shown' 
    } 

    save: (e) -> 
    ... 
    false 

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

    render:() -> 
    $(@el).html(ich.nav_edit_project_template(@model.toJSON())) 
    @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true}) 
    @ 

El (bigote) plantilla HTML correspondiente :

<div class="modal hide" style="display: none; "> 
    <div class="modal-header"> 
    <a href="#" class="close">×</a> 
    <h3>New Project</h3> 
    </div> 
    <div class="modal-body form-stacked"> 
    <label for="name">Name</label> <input type="text" name="name" value="{{name}}"/><input type="hidden" name="lock_version" value="{{lock_version}}"/> 
    </div> 
    <div class="modal-footer"> 
    <a href="javascript:void(0)" class="save btn primary">Create</a> 
    <a href="javascript:void(0)" class="cancel btn secondary">Cancel</a> 
    </div> 
</div> 

ni save ni shown se invocan cuando se activan los eventos respectivos.

¿Alguna idea?

Answer 1

De acuerdo, así que la solución es más bien 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 

Resumiendo las cosas, la clave es dividida con los modales en dos pasos que da la posibilidad de asignar @el e invocar @delegateEvents() después, antes de hacer visible . @el.modal(true) se puede usar para obtener acceso al objeto que controla el modal, por ejemplo, para ocultarlo mediante programación.