доброго времени суток,
начал знакомство с backbone с книги "Developing Backbone.js Applications" Addy Osmani. Там есть пример приложения, так вот, по нему не получается повесить функцию на клик по кнопке. При клике на кнопку вообще ничего не происходит, в консоли нет ошибок. Кнопка с id="add"
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Backbone tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="books">
<form id="addBook" action="#">
<div>
<label for="coverImage">CoverImage:</label>
<input id="coverImage" type="file" />
<label for="title">Title: </label> <input id="title" type="text" />
<label for="author">Author:</label> <input id="author" type="text"/>
<label for="releaseDate">Release date: </label> <input id="releaseDate" type="text"/>
<label for="keywords">Keywords:</label> <input id="keywords" type="text"/>
<button id="add">Add</button>
</div>
</form>
</div>
<script id="bookTemplate" type="text/template">
<img src="<%= coverImage %>" />
<ul>
<li> <%= title %></li>
<li> <%= author %></li>
<li> <%= releaseDate %></li>
<li> <%= keywords %></li>
</ul>
<button class="delete"> Delete</button>
</script>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone.localstorage.js"></script>
<script src="js/models/book.js"></script>
<script src="js/collections/library.js"></script>
<script src="js/views/book.js"></script>
<script src="js/views/library.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
library.js
var app = app || {};
app.LibraryView = Backbone.View.extend({
el: '#books',
events: {
'click #add':'addBook'
},
initialize: function( initialBooks) {
this.listenTo(this.collection, 'add', this.renderBook);
this.collection = new app.Library(initialBooks);
this.render();
},
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(i, el){
if($(el).val() != ''){
formData[el.id] = $(el).val();
}
});
this.collection.add(new app.Book(formData));
}
});
подскажите пожалуйста, почему этот
events: {
'click #add':'addBook'
},
не срабатывает? Хотя подобным образом для book сделал событие delete, оно срабатывает прекрасно.