Backbone.js görünümünde bootstrap-modal kullanma

Question

Görünümün events özniteliği aracılığıyla Backbone'un otomatik olay delegasyonunu kullanan bir Twitter bootstrap-modal'ı temel alan bir Backbone.js görünümü oluşturmaya çalışıyorum.

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

Bence:

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

tekabül (Bıyık) HTML şablonu modal görüntülemeden önce görünümü HTML klonlar olarak

Maalesef önyükleme-modal omurga olay heyet kırmak gibi görünüyor :

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

ne save ne de 012 İlgili olaylar tetiklendiğindeçağrılır.

Herhangi bir fikrin var mı? Anahtar sonradan görünür yapmadan önce @el atamak ve @delegateEvents() çağırmak imkanı veren iki adımda içine modal gösteren bölmek olduğunu

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 

şeyi özetliyor:

Answer 1

Pekala, bu yüzden çözüm oldukça basit oldu . @el.modal(true), örneğin, programsal olarak gizlemek için modalın kontrol edildiği nesneye erişim sağlamak için kullanılabilir.