簡單的骨幹事件沒有觸發

Question

我有以下看法，我試圖將一個點擊事件綁定到一個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在控制檯，它會增加一個新的圖書查看，然而，渲染功能似乎並沒有最初工作在頁面加載時。

這是我在html中的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 

Answer 1

你必須實例化你的視圖new app.LibraryView()爲了讓你的視圖的事件被綁定。