简单的 Backbone 事件未触发答案

【问题标题】：simple Backbone event not firing简单的 Backbone 事件未触发
【发布时间】：2014-02-23 22:09:58
【问题描述】：

我有以下视图，我正在尝试将单击事件绑定到 ID 为#add 的按钮。但是，它甚至不会注册 preventDefault 函数。

var app = app || {};

app.LibraryView = Backbone.View.extend({
el: '#books',

events: {
    'click #add' : 'addBook'
},

initialize: function() {
    this.collection = new app.Library();
    this.render();
    this.listenTo( this.collection, 'add', this.renderBook);

},

render: function() {
    this.collection.each(function( item ) {
        this.renderBook( item );
    }, this );
},

renderBook: function( item ) {
    var bookView = new app.BookView({
        model: item
    });
    this.$el.append( bookView.render().el );
},

addBook: function(e) {
    e.preventDefault();
    var formData = {};
    $('#addBook div').children('input').each(function(index, el) {
      if($(el).val() != '') {
        formData[el.id] = $(el).val();
      }
    });

    this.collection.add(new app.Book(formData));
    console.log("book added");
}


});

另外，我可以在控制台中调用 renderBook，它会添加一个新的 bookView，但是，当页面最初加载时，渲染功能似乎不起作用。

这是我的翡翠html。

block content
#books
  form#addBook(action'#')
    div
      label(for='coverImage').span5 Image URL:
      input#coverImage(type='text')
      label(for='title').span5 Title:
      input#title(type='text').span5
      label(for='author') Author:
      input#author(type='text').span5
      label(for='date') Date:
      input#date(type='text').span5
      label(for='tags') Tags:
      input#tags(type='text').span5
      button#add Add


.bookContainer
  ul
   li Title
   li Author
   li Date
  button Delete

【问题讨论】：

抱歉，认为这是 Markdown 的复制/粘贴问题。 #add 包含在 #books 下的 div 中
将其更改为
是的，我很确定。当我检查页面元素时，我看到它是 devtools。如果包含 #books 的 html 文件是这样组织的，我的文件的组织方式会导致问题：jsfiddle.net/66HSU/1

标签： backbone.js pug backbone-views backbone-events

【解决方案1】：

您必须实例化您的视图 new app.LibraryView() 才能绑定您的视图事件。

【讨论】：

是的，看起来就是这样。到目前为止，我还没有在我的 app.js 文件中创建 LibraryView 的实例。感谢您指出这一点。