События модели

Backbone.js предоставляет мощный механизм событий, который позволяет моделям уведомлять другие части приложения о своих изменениях. Этот механизм является основой реактивной архитектуры и облегчает построение поддерживаемого и модульного кода.

Основные принципы работы с событиями

Модель в Backbone наследует методы из Backbone.Events. Это позволяет выполнять следующие действия:

  • Подписка на событие с помощью on(event, callback, [context]).
  • Удаление подписки через off(event, callback, [context]).
  • Вызов события с помощью trigger(event, [args...]).

Каждое событие модели может передавать дополнительные аргументы, что позволяет передавать контекст и данные об изменении.

var Task = Backbone.Model.extend({});

var task = new Task();

task.on('change', function(model) {
    console.log('Модель изменилась', model.toJSON());
});

task.set({title: 'Новая задача'});

В данном примере событие change срабатывает каждый раз, когда данные модели обновляются через set.

Встроенные события модели

Backbone.js предоставляет несколько предопределенных событий:

  • change — вызывается при любом изменении атрибутов модели.
  • change:attribute — вызывается при изменении конкретного атрибута, например, change:title.
  • destroy — срабатывает при удалении модели через destroy().
  • sync — вызывается после успешной синхронизации модели с сервером.
  • error — срабатывает при ошибке валидации или во время синхронизации.

Пример отслеживания конкретного атрибута:

task.on('change:title', function(model, value) {
    console.log('Название задачи изменено на', value);
});

task.set({title: 'Срочная задача'});

События при изменении атрибутов

События change и change:attribute позволяют реализовать детальное реагирование на изменения модели. Можно получить старое значение через метод previous:

task.on('change:title', function(model) {
    console.log('Предыдущее значение:', model.previous('title'));
    console.log('Новое значение:', model.get('title'));
});

Метод hasChanged() позволяет проверить, изменился ли атрибут:

if (task.hasChanged('title')) {
    console.log('Название задачи было изменено');
}

Метод changedAttributes() возвращает объект всех изменённых атрибутов и их новых значений, что особенно полезно при отслеживании сложных изменений:

task.set({title: 'Другая задача', status: 'В процессе'});
console.log(task.changedAttributes());

События создания, удаления и синхронизации

  • Создание модели с save() инициирует события request и sync, что позволяет отслеживать процесс взаимодействия с сервером.
  • Удаление модели с помощью destroy() вызывает события destroy, request и sync.
  • Обновление модели также инициирует change и sync, обеспечивая полный цикл уведомления всех подписчиков.

Пример работы с синхронизацией:

task.on('sync', function(model, response, options) {
    console.log('Модель успешно синхронизирована с сервером', response);
});

task.save({title: 'Обновлённая задача'});

Контекст и управление событиями

Методы on и off поддерживают параметр context, который определяет объект, в контексте которого будет вызван callback. Это позволяет избежать проблем с потерей контекста this:

var view = {
    name: 'TaskView',
    render: function() {
        console.log('Отрисовка', this.name);
    }
};

task.on('change', view.render, view);
task.set({title: 'Новая задача'});

Удаление подписки на событие через off может быть полным или выборочным:

task.off('change:title'); // убирает только слушатель изменения title
task.off(); // убирает все события модели

Пользовательские события

Backbone позволяет создавать собственные события помимо встроенных. Это делает систему событий гибкой и удобной для расширения приложения:

task.on('priority:high', function() {
    console.log('Задача с высоким приоритетом!');
});

task.trigger('priority:high');

Пользовательские события могут передавать любые данные, что упрощает взаимодействие между компонентами приложения.

Резюме по событиям модели

События модели в Backbone.js являются фундаментальным инструментом для построения реактивных приложений. Возможность подписки на изменения, синхронизацию с сервером и создание собственных событий обеспечивает высокую модульность кода и позволяет легко управлять состоянием приложения. Основные методы on, off, trigger совместно с встроенными событиями модели создают гибкую систему, адаптируемую под любые сценарии.

Оглавление