В этом уроке давайте поговорим о событиях dom-events. Наши представления должны каким-то образом прослушивать, когда происходят определенные события: например, когда мы кликаем по кнопке, срабатывает событие click, или двойной клик dbclick по элементу с определенным классом и т.д. Со всем этим отлично справляется jquery, но bockbone и здесь будет чем вас удивить.
main.js:
$(function() {
// пространство имён
window.App = {
Models: {},
Collections: {},
Views:{}
};
// шаблон
window.template = function(id) {
return _.template( $('#' + id).html() );
};
App.Models.Task = Backbone.Model.extend({});
App.Views.Task = Backbone.View.extend({
tagName: 'li',
template: template('taskTemplate'),
render: function () {
var template = this.template(this.model.toJSON());
this.$el.html( template );
return this;
},
events:{
'click .edit': 'editTask'
},
editTask: function () {
var newTaskTitle = prompt('Как переименуем задачу?', this.model.get('title'));
this.model.set('title', newTaskTitle);
}
});
App.Collections.Task = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
// создавать новый дочерний вид
var taskView = new App.Views.Task({ model: task });
// добавлять его в корневой элемент
this.$el.append(taskView.render().el);
}
})
window.tasksCollection = new App.Collections.Task([
{
title: 'Сходить в магазин',
priority: 4
},
{
title: 'Получить почту',
priority: 3
},
{
title: 'Сходить на работу',
priority: 5
},
]);
var tasksView = new App.Views.Tasks({ collection: tasksCollection});
$('.tasks').html(tasksView.render().el);
});index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Список задач</h1>
<div class="tasks">
<script type="text/template" id="taskTemplate">
<span><%= title %></span> <button class="edit">Edit</button> <button class="delete">Delete</button>
</script>
</div>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/main.js"></script>
</body>
</html>Теперь у нас есть очень элегантное решение для прослушки событий. Даже если вы вернетесь через 6 месяцев к своему проекту – его всё ещё будет легко читать. Как видите, backbone стремиться структурировать ваше приложение во всех его частях.
