Backbone Global Event Bus - Basic

An example using a global event bus to send messages between different objects in Backbone without them requiring a reference to each other.

by James O'Reilly

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<!-- An example using a global event bus to send messages between different objects in Backbone without them requiring a reference to each other. -->

JavaScript

var CUSTOM_EVENT = 'customEvent';

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

var FooView = Backbone.View.extend({
    events: {
        'click button': 'onButtonClick'
    },
    initialize: function () {
        eventBus.on(CUSTOM_EVENT, this.onCustomEvent, this);
    },
    remove: function () {
        eventBus.off(CUSTOM_EVENT, this.onCustomEvent, this);
    },
    render: function () {
        this.$el.append('<button>Click</button><span></span>');
        return this;
    },
    onButtonClick: function (event) {
        eventBus.trigger(CUSTOM_EVENT, Math.random());
    },
    onCustomEvent: function (data) {
        this.$el.find('span').text(data);
    }
});

var fooView;
for (var i = 0; i < 5; i++) {
    fooView = (new FooView()).render();
    $('body').append(fooView.el);
}