Entity events

The View, CollectionView and Behavior can bind to events that occur on attached models and collections - this includes both standard backbone-events and custom events.

Event handlers are called with the same arguments as if listening to the entity directly and called with the context of the view instance.

Model Events

For example, to listen to a model's events:

import { View } from 'backbone.marionette';

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

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

Live example

The modelEvents attribute passes through all the arguments that are passed to model.trigger('event', arguments).

The modelEvents attribute can also take a function returning an object.

Function Callback

You can also bind a function callback directly in the modelEvents attribute:

import { View } from 'backbone.marionette';

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

Live example

Collection Events

Collection events work exactly the same way as modelEvents with their own collectionEvents key:

import { View } from 'backbone.marionette';

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

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

Live example

The collectionEvents attribute can also take a function returning an object.

Just as in modelEvents, you can bind function callbacks directly inside the collectionEvents object:

import { View } from 'backbone.marionette';

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

Live example

Listening to Both

If your view has a model and collection attached, it will listen for events on both:

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');
  }
});

Live example

In this case, Marionette will bind event handlers to both.