Backbone.DeclarativeEvents

Allows you to listen to events on Models, Collections, sub views, and the Backbone (pub/sub) object in a declarative way – cleaning up the this.listenTo mess that typically results in Backbone views.

This is a rewrite and extension of the awesome Codecademy/Backbone.Declarative plugin by Amjad Masad.

• The main reason for the rewrite is that the original plugin only allowed for bindings on models and collections – exclusively for views.
• This plugin allows you to set up declarative bindings for any object of a view/model/collection that supports backbone events – even the global Backbone object.

Usage

The non-declarative way:

ExampleView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);

    this.listenTo(this.collection, 'add', this.onAdd);
    this.listenTo(this.collection, 'remove', this.onRemove);

    // Example subview
    this.fooView = new FooView();

    this.listenTo(this.fooView, 'bar', this.onBar);
    this.listenTo(this.fooView, 'car', this.onCar);

    // Pub/sub binding
    this.listenTo(Backbone, 'event1', this.onEvent1);
  },
  ...

The declarative way: just use the format *object*Events where object could be the name of a model, collection, view, or event-triggerable object.

ExampleView = Backbone.View.extend({
  modelEvents: {
    'change': 'render',
    'destroy': 'remove'
  },

  collectionEvents: {
    'add': 'onAdd',
    'remove': 'onRemove'
  },

  fooViewEvents: {
    'bar': 'onBar',
    'car': 'onCar'
  },

  BackboneEvents: {
    'event1': 'onEvent1'
  },

  initialize: function() {
    this.fooView = new FooView();
  },
  ...

What about namespaced event names?

For large, pub/sub apps, you might have a namespace/enumeration of events strings like the following:

window.MyEvents = {
  EVENT1: 'event1',
  EVENT2: 'event2'
};

However, you can't use a variable in an object literal definition. To set up this binding declaratively, you should set up the BackboneEvents attribute to be a function that returns your event -> function name mappings. For example:

ExampleView = Backbone.View.extend({
  BackboneEvents: function () {
    var events = {};

    events[MyEvents.EVENT1] = 'onEvent1';
    events[MyEvents.EVENT2] = 'onEvent2';

    return events;
  }
  ...

License

MIT