Home » Backbone » Backbone Events

Backbone Events

So far we have seen how events work in backbone models, views and collections. They can handle change in data, they can handle change in DOM and much more and you must have realized the importance of events in backbone.js library. So isn’t it a good idea to go further and learn more about events? for those who have answered “yes”,I welcome them to the fifth module of this series, for those who have answered no, I bet you, you will surely come back to this module sooner or later.

Once again welcome to the fifth module of this series. In this module we will get in-depth knowledge of backbone events, how can we use backbone events, how can we attach backbone events, how can we detach backbone events, how can we define customized events.

Below are the topics that I will cover in this tutorial:

  • On
  • Namespace
  • Triggering events together
  • Bind callback function together
  • All
  • Off

 

On

Backbone On() function is used to bind the callback Function with the object. To call that callback function you should trigger the event. 

var exerciseCallBack = function(hours){
                console.log("Daily "+hours+" hours");
}

Backbone.Events.on("exercise",exerciseCallBack);

Backbone.Events.trigger("exercise","1.5");
//console: Daily 1.5 hours

Above example binds “exerciseCallBack” function with Backbone.Events object. To invoke “exerciseCallBack” function you should trigger exercise event.

 

Namespace

It is always a good practice to use namespace event name.

var armsExerciseCallBack = function(hours){
            console.log("Do arms "+hours+" a week");
}

var legsExerciseCallBack = function(hours){
             console.log("Do legs "+hours+" a week");
}

Backbone.Events.on("exercise:arms",armsExerciseCallBack);
Backbone.Events.on("exercise:legs",legsExerciseCallBack);

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

// console: Do arms twice a week
// console: Do legs thrice a week

Above example have two namespace events “exercise:arms” and “exercise:legs”

The important point to note here is calling “exercise” will not going to call both the callback functions. Namespace are only used for naming, in above example both the function has no relation with each other. 

Backbone.Events.trigger("exercise","twice"); //will not do anything because its callback is not attached to Backbone.Events.

 

Triggering events together

Instead of triggering events separately (like we did in previous example), you can call them together separated by space. So above example can be re-written as:

 Backbone.Events.trigger("exercise:arms exercise:legs","five times");

// console: Do arms five times a week
// console: Do legs five times a week

This will trigger both callback functions and pass “five times” as parameter.

You can pass multiple parameters also to callback function separated by comma. 

var armsExerciseCallBack_Daily= function(exercise,count){
       console.log("Do "+ count +" "+exercise+" in a day");
}
var armsExerciseCallBack_Week = function(exercise,count){
       console.log("And "+ (count*7) +" "+exercise+" in a week");
}

Backbone.Events.on("exercise:arms", armsExerciseCallBack_Daily);
Backbone.Events.on("exercise:legs", armsExerciseCallBack_Week);

Backbone.Events.trigger("exercise:arms exercise:legs","push-ups","20");

// console: Do 20 push-ups in a day.
// console: And 140 push-ups in a week.

 

Bind callback function together

As you passed triggering events together in previous example, you can pass multiple callback functions to on() function.

Backbone.Events.on({
          "exercise:arms":armsExerciseCallBack,
          "exercise:legs":legsExerciseCallBack
});

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

// console: Do arms twice a week
// console: Do legs thrice a week

 

all

Backbone provides special type of event, “all”. This event basically tells the name of whatever event has been called on that object. In callback of “all” eventName is passed as a first argument.

Backbone.Events.on("all", function(eventName){
                console.log(eventName);
});

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

// console: exercise:arms
// console: exercise:legs

 

off

On() function is used to bind the callback function with an object; on the other hand, off() function is used to unbind the callback function from an object.

var armsExerciseCallBack = function(hours){
                console.log("Do arms "+hours+" a week");
}

var legsExerciseCallBack = function(hours){
                console.log("Do legs "+hours+" a week");
}

Backbone.Events.on({
                "exercise:arms":armsExerciseCallBack,
                "exercise:legs":legsExerciseCallBack
});

Backbone.Events.off("exercise:legs");

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

// console: Do arms twice a week

Above example will unbind “exercise:legs”, so only “exercise:arms” callback function will be triggered.

To remove all callbacks of particular event, simply pass that event name to off(). 

Backbone.Events.off(exercise); // will remove all the callback function of exercise.

To remove eventName for callback, pass callback function name to off() 

Backbone.Events.off(null,armsExerciseCallBack);

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

// console: Do legs thrice a week

To remove all the callback function, call off() without passing any parameter. 

Backbone.Events.off();

Backbone.Events.trigger("exercise:arms","twice");
Backbone.Events.trigger("exercise:legs","thrice");

//console: no output

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>