Показать сообщение отдельно
  #1 (permalink)  
Старый 12.09.2015, 19:54
Интересующийся
Отправить личное сообщение для Mawr Посмотреть профиль Найти все сообщения от Mawr
 
Регистрация: 28.02.2012
Сообщений: 26

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