Backbone.jsビューとしてのbootstrap-modalの使用

Question

私は、ビューのevents属性によるBackboneの自動イベント委任を利用するTwitterブートストラップモードに基づいてBackbone.jsビューを作成しようとしています。

残念ながら、ブートストラップモーダルが、それはモーダルを表示する前にビューのHTMLをクローンとしてバックボーンのイベントの委任を破るようだ：

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

マイビュー：

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

対応（口ひげ）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> 

saveでもshownは、それぞれのイベントがトリガされたときに呼び出されます。

アイデア？

Answer 1

オールライト、その解決策はかなり簡単だったされています

物事をまとめる

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 

、キーが@elを割り当て、それを可視化する前に、後で@delegateEvents()起動する可能性を与える2つのステップにモーダルを示す分割することです。 @el.modal(true)を使用して、モーダルを制御するオブジェクトへのアクセスを取得することができます。たとえば、プログラムで非表示にすることができます。