привязка события к кнопке
доброго времени суток,
начал знакомство с 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, время: 03:23. |