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 intotemplate
is the template for renderingstayDuraction
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') });