Backbone.js: Tại sao sự kiện này không bị ràng buộc?

Question

Tôi có một danh sách việc cần làm đơn giản và tất cả đều hiển thị như mong đợi, nhưng khi tôi nhấp vào nút gửi trong biểu mẫu chỉnh sửa, biểu mẫu được gửi (GET/todo_items) và trang được tải lại chỉ hiển thị biểu mẫu chỉnh sửa . Sự kiện "gửi biểu mẫu" không bị ràng buộc và tôi không thể hiểu tại sao. Tôi đang thiếu gì?

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

Dưới đây là hình thức chỉnh sửa:

<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

Backbone sử dụng delegateCác yếu tố trên phần tử el. Nếu bạn không chỉ định "el" hoặc không sử dụng "el" để hiển thị chế độ xem của mình, ủy quyền sự kiện sẽ không hoạt động. Thay vì làm

$("#edit_area") 

trong làm của bạn, vượt qua nó như tùy chọn "el" trong constructor:

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

Tham khảo nó như this.el ở khắp mọi nơi trong mã tầm nhìn của bạn, đặc biệt là ở làm cho bạn .

Answer 2

Sau nhiều giờ monkeying với điều này, nó làm việc sau khi tôi dứt khoát thiết el trên xem, và sử dụng $(this.el) trong render chức năng. Kỳ dị.