0

Backbone.js listenTo Event

 1 week ago
source link: https://www.geeksforgeeks.org/backbone-js-listento-event/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Backbone.js listenTo Event

Last Updated : 14 Dec, 2022

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone.js listenTo Event notifies an object to listen to a particular event on another object. The benefit of using this form is that listenTo permits the object to keep the track of the events, and later, even they are removed all at once. When an event occurs, the callback function will be called with the object as context.

Syntax:

Object.listenTo( other , event, callback);

Parameter Values:

  • other: This parameter is used to define the name of the object.
  • event: This parameter is used to bind the event with an object.
  • callback: This parameter is used to make reference to the function which is called when an object bind event occurs. 

Example 1: This example describe the Event listenTo() function in BackboneJS.

<!DOCTYPE html>
<html>
<head>
<title>
BackboneJS listenTo Event
</title>
<script src=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS listenTo Event</h3>
<script type="text/javascript">
var first = _.extend({
value: 'GeeksforGeeks ',
}, Backbone.Events);
var second = _.extend({
value: 'Backbone Event listenTo',
}, Backbone.Events);
let callback = function() {
document.write(`</br>This is ` + this.value + ` course.`);
};
first.listenTo(first, 'listenVar', callback);
second.listenTo(second, 'listenVar', callback);
first.trigger('listenVar');
</script>
</body>
</html>

Here, the _.extend() function is used to create a copy of all the properties of the source objects over the destination object and return the destination object.

Output:

1.png

listenTo() Event

Example 2: This example describes when we are listening to an object until the page is destroyed if we bind the event with the object. The Backbone.js listenTo always whenever bind event trigger.

<!DOCTYPE html>
<html>
<head>
<title>
BackboneJS listenTo Event Multiple times
</title>
<script src=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
BackboneJS listenTo Event
</h3>
<script type="text/javascript">
var temp = _.extend({
value: 'Backbone Event listenTo',
}, Backbone.Events);
let callback = function() {
document.write(`</br>This is `
+ this.value
+ " ");
};
temp.listenTo(temp, 'event', callback);
for(let i = 1; i < 6; i++) {
temp.trigger('event');
document.write(i + " time");
}
</script>
</body>
</html>

Output:

1.png

listenTo() Event with Multiple times

Reference: https://backbonejs.org/#Events-listenTo

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK