簡單的骨幹事件沒有觸發

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

來源

2014-02-23 gh0st

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

的div中，將其更改爲

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

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

來源

2014-02-24 05:44:29

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

簡單的骨幹事件沒有觸發

回答

相關問題