Introduction
This chapter demonstrates about the Backbone.js Events which are capable to bind the objecta and trigger the custom events and following are the concepts covered in this chapter.
- Events
- Built-in Events
Description
Backbone.js Events are the modules which will be mixed into any object. It facilitates the objects to bind and trigger the custom events with the required name of choice. The following could be a list of methods which will be used to manipulate the Backbone.js Events.
| Method | Description |
|---|---|
| on | Which binds an event to an object and executes the call back when it gets into action. |
| off | Is used to remove the callback functions or all events from an object. |
| trigger | Which invokes some callback functions for the given events. |
| once | Which extends backbone.model when creating own backbone model. |
| listento | Which informs one object to listen to an event on another object. |
| stoplistening | Which can be used to stop listening to events on the other objects. |
| listentoonce | Which causes the listen to occur only once before the call back function is being removed. |
The event On method is used to bind an event to an object and its call back function which executes a call back function whenever event is fired The syntax of the Event on() is shown below.
[code]
object.on(event, callback function, [context])
[/code]
Parameters
The code below demonstrates the Eventon() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event On Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Here creating an object 'myVal' and extending with Backbone.Events method
var myVal = _.extend({name:'Welcome to SPlessons'}, Backbone.Events);
// The on() method will bind callback function to an object and invoked whenever an event triggers
myVal.on('myFunc', function () {
document.write("The triggered value is: ");
document.write(this.name);
});
//It triggers the 'myFunc' event on object 'myVal'
myVal.trigger('myFunc');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- event Which is used to bind an object?
- call back Which execute whenever an event is fired.
- context Which is an object which can be passed to a call back function?
Event off method removes call back functions or all events from an object. The syntax is as shown below.
[code]
object.off(event, callback function, [context])
[/code]
Parameters
The code below demonstrates the Eventoff() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event Off Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Here creating an object 'myVal' and extending with Backbone.Events method
var myVal = _.extend({name:'Hello Guys'}, Backbone.Events);
var myFunc = function () {
document.write('Hello Guys');
};
var myFunc1 = function () {
document.write('This is splessons');
};
//The on() method will bind the callback function to objects 'myFunc' and 'myFunc1'
myVal.on('log',myFunc);
myVal.on('log',myFunc1);
document.write('Before using off event, values will be: ');
//trigger() method callbacks for the given event and display the text defined in the 'myFunc' and 'myFunc1' functions
myVal.trigger('log');
//The off() method removes the callback for 'myFunc' and display only text of 'myFunc1'
myVal.off('log',myFunc);
document.write("<br>");
document.write('After using off event, values will be: ');
myVal.trigger('log');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- event Which is used to bind an object?
- call back Which execute whenever an event is fired.
- context Which is an object which can be passed to a call back function?
trigger method invokes the call back function for the given events. The syntax below demonstrates the trigger event.
[code]
object.trigger(event,[args])
[/code]
Parameters
The code below demonstrates the trigger() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event Trigger Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Created an object 'myVal' and extended it using Backbone.Events method
var myVal = _.extend({title:'SPlessons', site:'www.splessons.com'}, Backbone.Events);
//The on() method will bind the callback function to an object
myVal.on('myFunc', function () {
document.write("The triggered value for site is: ");
document.write(this.site); //value of site will get displayed by referring the current object
});
// The trigger() method triggers the 'myFunc' event on 'myVal'
myVal.trigger('myFunc');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- event Which is used to bind an object.
- args Which is used to pass values/arguments to the call back functions.
Which is just like a event on method but which cause the bound call back to only fire once before being removed. The syntax below demonstrates the Event once as shown.
[code]
object.once(event, callback function, [context])
[/code]
Parameters
The code below demonstrates the Event once() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event Once Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//The created object 'myVal' is extended using Backbone.Events method
var myVal = _.extend({name:'SPlessons'}, Backbone.Events);
//The once() method causes the bound callback to only fire once before being removed
myVal.once('hello', function () {
document.write("The value after firing once is: ");
document.write(this.name);//name will get displayed by referring the current object
});
//It triggers the 'hello' event on object 'myVal'
myVal.trigger('hello');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- event Which is used to bind an object?
- call back Which execute whenever an event is fired.
- context Which is an object which can be passed to a call back function?
Which method tells an object to listen to the particular event on another object which provides call back function when an event occurs and also keeps track of events. The syntax below demonstrates the Event listen To.
[code]
object.listenTo(other, event, callback)
[/code]
Parameters
The code below demonstrates the Event listenTo() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event listenTo Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Create an object 'myVal' and 'myVal1' and extend them using Backbone.Events method
var myVal = _.extend({name:'Hello..'}, Backbone.Events);
var myVal1 = _.extend({name:'Welcome to splessons'}, Backbone.Events);
//create the 'listenMe' callback function and invoke when one object listens to particular event on another object
var listenMe = function(){
document.write("The value is: ");
document.write(this.name);
};
//The object 'myVal1' listens once for the 'listenMe' event triggered on object 'myVal'
myVal1.listenTo(myVal, 'listenMe', listenMe);
//The 'myVal' has no listenMe event and displays the value of 'myVal1'
myVal.trigger('listenMe');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- other Which is used to define the name of the other project.
- event it is used to bind an object.
- callback Which reference to the code and called with the object as context.
Which can be used to stop listening to events on the other objects. The syntax below demonstrates the Event stopListening as shown.
[code]
object.stopListening(other, event, callback)
[/code]
Parameters
The code below demonstrates the Event stopListening() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event stopListening Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Create an object 'myVal' and 'myVal1' and extend them using Backbone.Events method
var myVal = _.extend({name:'Hello..'}, Backbone.Events);
var myVal1 = _.extend({name:'Welcome to SPLessons'}, Backbone.Events);
//created the 'listenMe' callback function and invoked when one object listens to particular event on another object
var listenMe = function(){
document.write("The value is: ");
document.write(this.name);
};
//The object 'myVal1' listens once for the 'listenMe' event triggered on object 'myVal'
myVal1.listenTo(myVal, 'listenMe', listenMe);
//The 'myVal' has no 'listenMe' event and display the value of 'myVal1'
myVal.trigger('listenMe');
//The 'myVal1' stops listening to specific event on 'myVal' and displays nothing
myVal1.stopListening(myVal,'listenMe');
myVal.trigger('listenMe');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- other Which is used to define the name of the other project.
- event it is used to bind an object.
- callback Which reference to the code and called with the object as context.
Which causes the listen to occur only once before the call back function is being removed. The syntax below demonstrates the Event listenToOnce as shown.
[code]
object.listenToOnce(other, event, callback)
[/code]
Parameters
The code below demonstrates the Event listenToOnce() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Event listenToOnce Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//Create an object 'myVal' and 'myVal1' and extend them using Backbone.Events method
var myVal = _.extend({name:'SSSIT'}, Backbone.Events);
var myVal1 = _.extend({name:'SPlessons'}, Backbone.Events);
//created the 'listenMe' callback function and invoked when one object listen to particular event on another object
var listenMe = function(){
document.write("The value is: ");
document.write(this.name);
};
//The object 'myVal1' listen once for the 'listenMe' event triggered on object 'myVal'
myVal1.listenToOnce(myVal, 'listenMe', listenMe);
//The 'myVal' has no listenMe event and display the value of 'myVal1'
myVal.trigger('listenMe');
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- other Which is used to define the name of the other project.
- event it is used to bind an object.
- callback Which reference to the code and called with the object as context.
Description
Backbone.js facilitates you to use global events once it's required in your application. It comprises a number of the built-in events with arguments as shown in the below table.
| Event | Description |
|---|---|
| "add"(model,collection,options) | Which is used to add model to the collection. |
| "remove"(model, collection, options) | Is used to remove the model from the collection. |
| "reset"(collection,options) | Is used to reset the collection content. |
| "sort"(collection, options) | Which is used when the collection needs to restarted. |
| "change"(model, options) | Which is used when changes occur in a model?s attribute. |
| "destroy"(model, collection, options) | Which fires if the model is destroyed. |
| "request"(model_or_collection,xhr, options) | Which is used if the collection or model starts requesting to the server. |
| "sync"(model_or_collection, resp, options | Which are used if the collection or model synced successfully to the server. |
| "error"(model_or_collection, resp, options) | Which is activated when there is an error in requesting to the server. |
| "invalid"(model, error, options | Which return invalid when a failure occurs in model validations. |
| "route"(route, params) | Which is used when there is a match with any route. |
Key Points
- Events can be mixed with all objects.
- Which comprises number of built-in events with arguments.