Backbone.Events - cобытия в Backbone.js
Backbone.js

Backbone.Events - cобытия в Backbone.js

Объект Backbone.Events содержит набор функций, реализующих паттерн Наблюдатель (или издатель/подписчик) и помогающих взаимодействовать любым объектам Backbone (а на самом деле вообще любым объектам JavaScript) за счет расширения прототипов функциями, содержащимися в Backbone.Events.

Функции, содержащиеся в Backbone.Events, схожи с функциональностью, предоставляемой методами jQuery .on(), .off(), .trigger(), and .one() для присоединения пользовательских и нативных событий к элементам DOM и возможности слушать события.

Backbone.Events содержит следующие функции для создания событий, вызова событий, а также прослушивания событий между объектами.

  • on(event, callback, context) или bind()
  • off(event, callback, context) или unbind()
  • trigger(event, arguments)
  • once(event, callback, context)
  • listenTo(other object, event, callback)
  • stopListening(other object, event, callback)
  • listenToOnce(other object, event, callback)

Пространство имен Backbone само расширено функциями Backbone.Events, это означает, что доступна также глобальная система событий.

Пример:


//добавляем пользовательское событие к объекту Backbone
Backbone.on('sayHello', function() {
    console.log('Hello');
} );

//создаем объект и расширяем его функциями Backbone.Events
var listener = _.extend({}, Backbone.Events);

//добавим к объекту возможность слушать пользовательское 'sayHello' объекта Backbone
listener.listenTo(Backbone, 'sayHello', function() {
    console.log('I heard that');
});

//вызовем событие 'sayHello'
Backbone.trigger('sayHello'); //logs 'Hi' and 'I heard that'

Расширение любого объекта функциями Backbone.Events

Как мы уже говорили, Backbone.Events содержит ряд функций, которые могут быть подмешаны к любому конструктору Backbone.

При этом вы также можете расширять ими любой объект JavaScript. Ниже показан пример:


// расширим объект A методами Backbone.Events
var A = _.extend({ name: 'A' }, Backbone.Events);

// убедимся, что объект А действительно содержит методы Backbone.Events
console.log(Object.keys(A));

/* вывод консоли:
["name", "on", "once", "off", "trigger", "stopListening", "listenTo", "listenToOnce", "bind", "unbind"]
*/

Добавление обработчиков событий с помощью метода on()

Метод on() добавляет объекту фунцию-обработчик, которая будет вызываться при наступлении определенного события. В примере ниже мы добавили объекту A событие ’whatsMyName’ и вызвали его:


//расширим объект A методами Backbone.Events
var A = _.extend({ name: 'A'}, Backbone.Events);

//добавим объекту А событие whatsMyName и обработчик для него 
A.on('whatsMyName', function () {
    console.log(this.name);
});

//вызовем событие whatsMyName
A.trigger('whatsMyName'); //будет выведено A

/* FYI в качестве параметров метода on() можно передавать несколько событий и обработчиков соответственно 
A.on({ callback1 : function(){}, callback2 : function() });
*/
Обратите внимание: Метод once(event,callback,context) работает так же, как on(), за исключением того, что обработчик события удаляется сразу же после того, как будет вызван.

Добавление обработчика нескольких событий с помощью метода on()

Метод on() в качестве параметра принимает строку — название события. Но она может содержать названия и нескольких событий, разделенные пробелами. В этом случае функция обработчик будет вызываться при наступлении любого их них.


//расширим объект A методами Backbone.Events
var A = _.extend({ name: 'A' }, Backbone.Events);


//добавим два события и один обработчик для них
A.on('sayHi greet', function() {
    console.log('Hello'); 
} );

//вызовем каждое из событий - слово “Hello” будет выведено дважды
A.trigger('sayHi');
A.trigger('greet');

Пространства имен для событий

Можно использовать пространства имен для событий, использую разделитель ':' :


// расширим объект A методами Backbone.Events
var A = _.extend({ name: 'A' }, Backbone.Events);

A.on('say:hi', function() {
    console.log('Hi'); 
} );

A.on('say:hello', function() {
    console.log('Hello'); 
} );

// можно одновременно вызвать оба события
A.trigger('say:hi say:hello');

// Обратите внимание, строка ниже НЕ вызовет оба события
A.trigger('say');

Вызов событий и передача параметров функциям-обработчикам с помощью метода trigger().

Метод trigger() позволяет вызвать определенное событие. В качестве второго параметра этого метода можно передать массив параметров в функцию-обработчик:


//расширим объект A методами Backbone.Events
var A = _.extend({ name:'A' }, Backbone.Events);

A.on('say', function(options) {
    console.log(options[0]);
    console.log(options[1]); 
});

//вызовем событие ‘say’ с дополнительными параметрами
A.trigger('say', ['Hello','Good Bye']);

Изменение контекста this для функции обработчика

В качестве третьего параметра метода on() можно передать новый объект, который будет выступать контекстом для функции-обработчика:


// расширим объект A методами Backbone.Events
var A = _.extend({ name: 'A' }, Backbone.Events);
var B = { name: 'B' };

/* когда сработает событие 'sayMyName', в качестве контекста функции-обработчика будет выступать объект B */
A.on('sayMyName', function() {
    console.log(this.name);
}, B);

// вызываем событие sayMyName
A.trigger('sayMyName'); //будет выведено 'B'

Удаление событий и функций-обработчиков с помощью метода off()

Метод off() может использоваться в следующих пяти случаях для удаления определенных событий, функций обработчик или всех событий объекта.

1. Удаление определенной именованной функции обрабочика


// расширим объект A методами Backbone.Events
var A = _.extend({ name:'A' }, Backbone.Events);

var foo = function() {
    console.log('foo');
};
var bar = function() {
    console.log('bar');
};

// добавим два обработчика для события 'log'
A.on('log', foo);
A.on('log', bar);

// вызовем событие 'log' 
A.trigger('log'); // будет выведено foo, затем bar

// удалим один из обработчиков
A.off('log', foo);

// снова вызовем событие 'log' 
A.trigger('log'); //будет выведено только bar

2. Удаление всех обработчиков определенного события:


var A = _.extend({ name: 'A' }, Backbone.Events);

var foo = function() {
    console.log('foo');
};
var bar = function() {
    console.log('bar');
};

// добавим два обработчика события 'log'
A.on('log', foo);
A.on('log', bar);

A.trigger('log'); // будет выведено foo, затем bar

// удалим событие
A.off('log');

A.trigger('log'); // не будет выведено ничего

3. Удаление всех именованных функций-обработчиков всех событий:


var A = _.extend({ name: 'A' }, Backbone.Events);

var foo = function() {
    console.log('foo');
};

// добавим два события объекту А
A.on('log1', foo);
A.on('log2', foo);

A.trigger('log1 log2'); // будет дважды выведено foo

// удалим обработчик foo для всех событий
A.off(null, foo);

A.trigger('log1 log2'); // не будет выведено ничего

4. Удаление всех обработчиков, имеющих определенный контекст:


var B = _.extend({}, Backbone.Events);
var C = {}

// к объекту B добавим два обработчика с контектом C
B.on('logFoo', function() {
    console.log('foo');
}, C);

B.on('logBar', function() {
    console.log('bar');
}, C);

B.trigger('logFoo logBar'); // будет выведено foo, затем bar

// удалим все обработчики всех событий с контектом C
B.off(null, null, C);

B.trigger('logFoo logBar'); // не будет выведено ничего

5. Удаление всех событий и обработчиков определенного объекта:


var B = _.extend({}, Backbone.Events);

B.on('logFoo', function() {
    console.log('foo');
});

B.on('logBar', function() {
    console.log('bar');
});

B.trigger('logFoo logBar'); // будет выведено foo, затем bar

// удалим все обработчики всех событий объекта B
B.off();

B.trigger('logFoo logBar'); // не будет выведено ничего
Обратите внимание: Использование метода off() без параметров для моделей, коллекций, представлений или роутеров Backbone удаляет все события этих объектов, включая встроенные.

Установка одного объекта в качестве слушателя событий другого

Метод listenTo() дает возможность одному объекту слушать события другого, и когда наступает это событие — вызывать функцию-обработчик.

В примере ниже мы задаем объект В в качестве слушателя события ’whosListeningToMe’ объекта А. Когда наступает это событие — объект вызывает функцию ‘whosListeningToMe’ (обратите внимание, что контекстом функции обработчика будет объект B):


var A = _.extend({ name: 'A' }, Backbone.Events);
var B = _.extend({ name: 'B' }, Backbone.Events);

var whosListeningToMe = function() {
    console.log(this.name);
};

/* Объект B будет слушать событие whosListeningToMe объекта A, и при его наступлении будет вызвона функция whosListeningToMe */
B.listenTo(A, 'whosListeningToMe', whosListeningToMe);

A.trigger('whosListeningToMe'); // будет выведено B
Обратите внимание: Метод listenToOnce(other,callback,callback) аналогичен методу listenTo(other,callback,callback), но функция-обработчик срабатывает только при первом наступлении события.

Прекращение отслеживания событий от других объектов

Метод stopListening() может быть использован для объектов, слушающих события других объектов в четырех случаях:

1. Прекращение отслеживания всех событий:


var A = _.extend({ name: 'A' }, Backbone.Events);
var B = _.extend({ name: 'B' }, Backbone.Events);
var C = _.extend({ name: 'C' }, Backbone.Events);

var whosListeningToMe = function() { console.log(this.name); };

B.listenTo(A, 'whosListeningToMe', whosListeningToMe);
B.listenTo(C, 'whosListeningToMe', whosListeningToMe);

A.trigger('whosListeningToMe'); // logs B
C.trigger('whosListeningToMe'); // logs B

// отменяет прослушивание объектом B всех событий
B.stopListening();

// ничего не будет выведено
A.trigger('whosListeningToMe'); 
C.trigger('whosListeningToMe');

2. Прекращение отслеживания событий определенного объекта:


var A = _.extend({ name: 'A' }, Backbone.Events);
var B = _.extend({ name: 'B' }, Backbone.Events);
var C = _.extend({ name: 'C' }, Backbone.Events);

var whosListeningToMe = function() { console.log(this.name); };

B.listenTo(A, 'whosListeningToMe', whosListeningToMe);
B.listenTo(C, 'whosListeningToMe', whosListeningToMe);

A.trigger('whosListeningToMe'); // logs B
C.trigger('whosListeningToMe'); // logs B

//отменяет прослушивание объектом B всех событий объекта A
B.stopListening(A);

A.trigger('whosListeningToMe'); // ничего не будет выведено
C.trigger('whosListeningToMe'); // будет выведено B

3. Прекращение отслеживания определенного события определенного объекта:


var A = _.extend({ name: 'A' }, Backbone.Events);
var B = _.extend({ name: 'B' }, Backbone.Events);

var whosListeningToMe = function() { console.log(this.name); };

B.listenTo(A, 'whosListeningToMe', whosListeningToMe);

A.trigger('whosListeningToMe'); // logs B

// отменяет прослушивание объектом B события 'whosListeningToMe' объекта A
B.stopListening(A, 'whosListeningToMe');

// ничего не будет выведено
A.trigger('whosListeningToMe');

4. Удаление определенного обработчика определенного события определенного объекта:


var A = _.extend({ name: 'A' }, Backbone.Events);
var B = _.extend({ name: 'B' }, Backbone.Events);

var whosListeningToMe = function(){console.log(this.name);};
var whosListeningToMeAgain = function(){console.log(this.name);};

B.listenTo(A, 'whosListeningToMe', whosListeningToMe);
B.listenTo(A, 'whosListeningToMe', whosListeningToMeAgain);

A.trigger('whosListeningToMe'); //будет дважды выведено B

/*отменяет прослушивание объектом B события 'whosListeningToMe' с обработчиком whosListeningToMeAgain объекта A*/
B.stopListening(A,'whosListeningToMe',whosListeningToMeAgain); 

A.trigger('whosListeningToMe'); //будет выведено B

Встроенные события Backbone

Backbone имеет определенные внутренние события, срабатывающие при построении моделей, коллекций, представлений и роутеров. Мы можем также использовать эти события в методах on() и listenTo().

Далее мы рассмотрим, как можно использовать эти события, а пока приведем полный список встроенных событий Backbone:

События объектов Backbone.Model, Backbone.Collection, Backbone.View, Backbone.Router и Backbone.History

событиеаргументы, передаваемые в обработчикописание
'all'название событияспециальное событие, срабатывающее при любом другом событии, в качестве первого аргумента в функцию обработчик передается название вызвавшего события

События коллекций Backbone.js

событиеаргументы, передаваемые в обработчикописание
'add'model, collection, optionsсобытие срабатывает при добавлении модели в коллекцию
'remove'model, collection, optionsсобытие срабатывает при удалении модели из коллекции
'reset'collection, optionsсобытие срабатывает при обновлении коллекции
'sort'collection, optionsсобытие срабатывает при сортировке коллекции

События моделей Backbone.js

событиеаргументы, передаваемые в обработчикописание
'change'model, optionsсобытие срабатывает при изменении определенного атрибута модели
'change:[attribute]'model, value, optionsсобытие срабатывает при изменении определенного атрибута модели
'destroy'model, collection, optionsсобытие срабатывает при удалении модели
'error'model, xhr, optionsсобытие срабатывает, если сохранение модели вызывает ошибку
'invalid'model, error, optionsсобытие срабатывает когда попытка изменить атрибуты модели вызывает ошибку валидации

События моделей и коллекций

событиеаргументы, передаваемые в обработчикописание
'request'model, xhr, optionsсобытие наступает, когда модель или коллекция начинает отправку запроса на сервер
'sync'model, resp, optionsсобытие срабатывает, когда модель или коллекция успешно синхронизируется с сервером

События роутера

событиеаргументы, передаваемые в обработчикописание
'route:[name]'paramsсобытие наступает при совпадении URL с определенным роутом
'route'router, route, paramsсобытие наступает при совпадении URL с любым из роутов
Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться