Backbone.js：このイベントはなぜバインドされていませんか？

Question

私は単純なToDoリストを持っていて、すべて期待どおりにレンダリングしていますが、編集フォームのSubmitボタンをクリックすると、フォームが提出され（GET/todo_items）、ページがリロードされます。 "submit form"イベントはバインドされておらず、理由を把握できません。私は何が欠けていますか？私は明示的にビューにelを設定し、render機能で$(this.el)を使用した後

<script id="edit_form" type="text/html"> 
    <form> 
    <label for="title">Title:</label> 
    <input name="title" type="text" value="{{title}}" /> 
    <button>Save</button> 
    </form> 
</script> 

Answer 1

バックボーンは、el要素に対してdelegateEventsを使用します。 "el"を指定しないか、 "el"を使用してビューをレンダリングしないと、イベントの委譲は機能しません。代わりに、あなたのレンダリング内

$("#edit_area") 

を行うための、コンストラクタで「エル」のオプションとして、それを渡す：

edit = new App.Views.Edit({el: $("#edit_area")}) 

は、特にあなたのレンダリングでは、どこでもあなたのビューのコードでthis.elとしてそれを参照してください。 。

Answer 2

はこれでmonkeyingの多くの時間後に、それが働いた：

App.Views.Edit = Backbone.View.extend({ 
    events: { 
    "submit form": "save" 
    }, 
    initialize: function(){ 
    this.render(); 
    }, 
    save: function(){ 
    var self = this; 
    var msg = this.model.isNew() ? 'Successfully created!' : 'Saved!'; 

    this.model.save({ 
     title: this.$('[name=title]').val(), 

     success: function(model, resp){ 
     console.log('good'); 
     new App.Views.Notice({message: msg}); 
     self.model = model; 
     self.render(); 
     self.delegateEvents(); 
     Backbone.history.saveLocation('todo_items/'+ model.id); 
     $('#edit_area').html(''); 
     }, 
     error: function(){ 
     console.log('bad'); 
     new App.Views.Error(); 
     } 
    }); 

    return false; 
    }, 
    render: function(){ 
    $('#edit_area').html(ich.edit_form(this.model.toJSON())); 
    } 
}); 

はここで編集フォームです。奇妙な。