Utilizzo di bootstrap-modal come vista Backbone.js

Question

Sto tentando di creare una vista Backbone.js basata su un modal bootstrap di Twitter, che utilizza la delega degli eventi automatici di Backbone tramite l'attributo events della vista.

Purtroppo, bootstrap-modal sembra rompere delegazione evento di Backbone come si clona il codice HTML vista prima di visualizzare il modal:

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

mio punto di vista:

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}) 
    @ 

La corrispondente (baffi) template HTML :

<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> 

né save né shown vengono chiamati quando vengono attivati ​​i rispettivi eventi.

Qualche idea?

Answer 1

Allright, quindi la soluzione è stata piuttosto semplice:

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 

Riassumendo le cose, la chiave è quello di dividere che mostra il modal in due fasi dando la possibilità di assegnare @el e invocare @delegateEvents() poi prima di renderlo visibile . @el.modal(true) può essere utilizzato per ottenere l'accesso all'oggetto che controlla il modale, ad esempio per nasconderlo programmaticamente.