Backbone.js：为什么这个事件没有绑定？

Question

我有一个简单的待办事项列表，一切都按预期呈现，但是当我点击编辑表单中的提交按钮时，表单被提交（GET /todo_items），页面被重新加载，只显示编辑形式。 “提交表单”事件没有被绑定，我不知道为什么。我错过了什么？

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

这是编辑表单：

<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 在 el 元素上使用 delegateEvents。如果您不指定“el”或不使用“el”来呈现您的视图，则事件委托将不起作用。而不是做

$("#edit_area") 

在您的渲染中，将其作为构造函数中的“el”选项传递：

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

在您的视图代码中的任何地方都将其称为 this.el，尤其是在您的渲染中。

Answer 2

经过数小时的修改后，我在视图上明确设置了el，并在render 函数中使用了$(this.el)，它才起作用。很奇怪。