Backbone flash mechanism

routing.js

var Backbone = require('backbone');

// Flash ///////////////////////////////////////////////////////////////////////////////////////////

// The flash is a way for one controller to pass a small amount of information to the next
// controller, through a navigation event.
//
// The flash holds arbitrary parameters, and is cleared by the router after each navigation event.
var flash = exports.flash = {
  params: {},

  addParams: function (options) {
    _.extend(this.params, options);
  },

  perform: function (object) {
    if (_.isEmpty(this.params)) return;
    if (object && typeof object.onFlash === 'function') {
      object.onFlash(this.params);
    }
    this.params = {};
  },
}

// Router //////////////////////////////////////////////////////////////////////////////////////////

// Router is our custom extension of the Backbone router, with the routes we need for our app.
var Router = exports.Router = Backbone.Router.extend({
  routes: {
    // Custom for your app
  },

  // Sets parameters in the flash (see above).
  flash: function (params) {
    flash.addParams(params);
    return this;
  },

  // Overrides Backbone.Router#navigate to “flash” the new controller after navigation (see above).
  navigate: function () {
    Backbone.Router.prototype.navigate.apply(this, arguments);
    flash.perform(this.root);
    return this;
  },
  
  // ...
});

// Create a single global router object for views to use
var router = exports.router = new Router();

// At some point in your startup code, you need to set the root view something like this:
//
// router.root = new RootView({el: $('#root')});
// Backbone.history.start({pushState: true});
//
// The RootView needs to handle onFlash, possibly delegating to child views.

usage.js

var routing = require('./routing')
var Backbone = require('backbone');

var MyView = Backbone.View.extend({
  // ...
  
  events: {
    'click .foo': function (event) {
      // Invoke the flash before navigation like this:
      routing.router.flash({foo: 1, bar: 2}).navigate('/path', {trigger: true});
    }
  },
  
  onFlash: function (params) {
    // Handle the flash params here, possibly delegating to child views
  },
  
  // ...
})