Skip to content

Instantly share code, notes, and snippets.

@ModuloM
Forked from addyosmani/mediatorExample.md
Created March 26, 2013 16:42
Show Gist options
  • Select an option

  • Save ModuloM/5246946 to your computer and use it in GitHub Desktop.

Select an option

Save ModuloM/5246946 to your computer and use it in GitHub Desktop.

Using the Mediator pattern is an effective way to avoid tightly coupling your views. In the latest version of Backbone, the Backbone object itself can be used as a mediator without the need for any additional code.

In the following example, triggerSomething in our ToolbarView uses the global event-bus on the Backbone object to broadcast an application wide event somethingHappened with data.

// First view
var ToolbarView = Backbone.View.extend({
  className: ".toolbar",
  events: {
    "click .button":   "triggerSomething"
  },
  
  triggerSomething: function(){
    Backbone.trigger('somethingHappened', { id: 2 });  
  },
  render: function() {
    ...
  }
});

In our second view TableView, we subscribe to the global somethingHappened event in our view initialization using Backbone.on(), executing some behavior whenever we are notified of a change. We are able to similarly unsubscribe in our view destruction using Backbone.off():

// Second view
var TableView = Backbone.View.extend({
    
    initialize: function () {
        Backbone.on('somethingHappened', onSomething);
    },
    
    render: function(){
      // ...  
    },
    destroy: function () {
        Backbone.off('somethingHappened', onSomething);
    },

    // Action when something happens.
    onSomething: function (data) {
        console.log('Received:' + data.id);
    }
});

The more recent listenTo method may also be used for the same purpose.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment