привязка события к кнопке
доброго времени суток,
начал знакомство с 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, оно срабатывает прекрасно. |
решено, оказалось дело в порядке строк. Нужно было так:
initialize: function( initialBooks) {
this.collection = new app.Library(initialBooks);
this.listenTo(this.collection, 'add', this.renderBook.bind(this));
this.render();
},
|
| Часовой пояс GMT +3, время: 01:44. |