2014-02-23 63 views
0

我有以下看法,我試圖將一個點擊事件綁定到一個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 
+0

對不起,認爲這是一個複製/粘貼問題與降價。 #add包含在#books – gh0st

+0

的div中,將其更改爲

+0

是的,我很確定它是。我在檢查頁面元素時會看到devtools。將如何組織我的文件會導致問題,如果包含#books的html文件是這樣組織的:http://jsfiddle.net/66HSU/1/ – gh0st

回答

1

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

+0

是的,似乎是這樣。到目前爲止,我還沒有在我的app.js文件中創建一個LibraryView的實例。感謝您指出了這一點。 – gh0st