Backbone.js : 왜이 ​​이벤트가 묶여 있지 않습니까?

Question

간단한 할 일 목록이 있고 모두 예상대로 렌더링되지만 편집 양식에서 제출 버튼을 클릭하면 양식이 제출되고 (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 = new App.Views.Edit({el: $("#edit_area")}) 

는 특히 렌더링에보기 코드 어디에서나 this.el로 참조 대신하여, 렌더링 생성자에서 "엘"옵션로 전달 내

$("#edit_area") 

을하는 .

Answer 2

이 함께 돌아온다의 몇 시간 후에는 일 :

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())); 
    } 
}); 

여기에 편집 양식입니다. 기묘한.