I recently created a flash notification module for Backbone. More information is available on the github project:

https://github.com/bmancini55/backbone-flash

This project adds basic flash notification using the Backbone event handling mechanism. Flash events are handled by the module and dispatched to the configured location. Overrides can be configured per event to allow messages to be placed anywhere.

A bower package was also created to allow you to easily pull this functionality into your project.

bower install backbone-flash

Initialization

Upon application start-up you must call initialize to enable flash messaging. This will use the default configuration which attaches flash messages to the HTML body element and will use underscore templating.

Backbone.Flash.initialize();

To override the default config, you can pass a config object to the initialize function with the following properties:

  • el overrides the element the flash messages will be rendered into
  • template is the template for rendering
  • stayDuraction dictates in MS how long a message will be displayed before being removed
Backbone.Flash.initialize({
  el: '#flashes',
  template: Handlebars.compile($("#template-flashview").html()),
  stayDuraction: 10000
})

Usage

Usage is easy, simply trigger a flash event and pass in an object containing the message and type properties

Backbone.trigger('flash', { message: 'Successfully did something!', type: 'success' });

You can also persist a message by including persist: true when triggering the event

Backbone.trigger('flash', { message: 'You should address this thing', type: 'info' });

You can also override the default configuration for flash when triggering the event by passing a config object

Backbone.trigger('flash', { message: 'Display in a sidebar', type: 'success' }, { el: $('#sidebar') });