Skip to content

Instantly share code, notes, and snippets.

@ModuloM
Forked from addyosmani/mediatorExample.md
Created March 26, 2013 16:42
Show Gist options
  • Save ModuloM/5246946 to your computer and use it in GitHub Desktop.
Save ModuloM/5246946 to your computer and use it in GitHub Desktop.

The Mediator pattern enables communication (mediation) between views using a mediator object.In the latest version of Backbone, the Backbone object itself can be used as a mediator without the need of a seperate helper.

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 TableView, we then 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