События сущностей

Компоненты View, CollectionView и Behavior могут подписываться на события, которые происходят на прикрепленных моделях и коллекциях — это включает как стандартные события Backbone, так и пользовательские события.

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

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

Например, чтобы прослушивать события модели:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  modelEvents: {
    'change:attribute': 'onChangeAttribute'
  },

  onChangeAttribute(model, value) {
    console.log('New value: ' + value);
  }
});

Пример

Атрибут modelEvents передает все аргументы, которые передаются в model.trigger('event', arguments).

Атрибут modelEvents также может содержать функцию, возвращающую объект.

Обработчик функций

Вы также можете связать обработчик функций непосредственно в атрибуте modelEvents:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  modelEvents: {
    'change:attribute': () {
      console.log('attribute was changed');
    }
  }
});

Пример

События коллекции

События коллекции работают точно так же, как и modelEvents, с собственным ключом collectionEvents:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  collectionEvents: {
    sync: 'onSync'
  },

  onSync(collection) {
    console.log('Collection was synchronised with the server');
  }
});

Пример

Атрибут collectionEvents также может содержать функцию, возвращающую объект.

Точно так же, как и в modelEvents, вы можете связать обработчики функций непосредственно внутри объекта collectionEvents:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  collectionEvents: {
    'update'() {
      console.log('the collection was updated');
    }
  }
});

Пример

Прослушивание обоих

Если в вашем представлении прикреплены model и collection, оно будет прослушивать события на обоих:

import { View } from 'backbone.marionette';

const MyView = View.extend({

  modelEvents: {
    'change:someattribute': 'onChangeSomeattribute'
  },

  collectionEvents: {
    'update': 'onCollectionUpdate'
  },

  onChangeSomeattribute() {
    console.log('someattribute was changed');
  },

  onCollectionUpdate() {
    console.log('models were added or removed in the collection');
  }
});

Пример

В этом случае Marionette свяжет обработчики событий для обоих.