Backbone.Notifications

Flash Notifications

There are three type of the flash notifications; flash, success and error.

• Flash Notification
• Success Notification
• Error Notification

notifications.trigger("flash", "hello, i'm a flash notification.");
notifications.trigger("success", "registration completed successful.");
notifications.trigger("error", "oppss, error during initialization.");

Loading Notification

You can use this notification type for inform the user while loading something.

• Start loader
• Finish loader

notifications.trigger("start:loader", "Loading, please wait...");
notifications.trigger("finish:loader");

Progress Bar

Also there is an other notification type to show progress bar for your long running operations.

• Start progress
• Update to 40%
• Update to 80%
• Finish progress

notifications.trigger("start:progress", "Loading, please wait...");
notifications.trigger("update:progress", 50);
notifications.trigger("finish:progress");

Configuration

Get the source code on github, and include the css and backbone.notifications.js file to your page.

<link rel="stylesheet" href="backbone.notifications.js" />
<script src="backbone.notifications.js"></script>

First step is the definition of notification object. You can use built-in Backbone objects or create an object that extends with Backbone.Events.

var notifications = {};
_.extend(notifications, Backbone.Events);

The second step is the configuration of Notifier view. Notifier view returns an unattached DOM element. You can attach this element to the body element.

$("body").append(new Notifier({
    model: notifications, // your notification object
    wait: 2000 // the duration of notifications as milliseconds
}).render(););

That's all. Now you can trigger your notification object.