Demonstrating Backbone.js: Listening to DOM events

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use collections in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections. You can get them from the following:

In this article we will see listening to DOM events using views

Backbone.js requires three dependencies , the Jquery Library , Underscore.js and Backbone.js libraries , this illustrates the simple task of associating a listener for the click event on the checkbox element on the DOM, Backbone.js provides all the necessary functionalities to make a fully fledge web applications , it is well known for the implementation of the MVc architecture .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
$(document).ready(function () {
/*Enclose the script under Jquery Document.ready , this makes sure that the script is executed after the DOM
elements on the browser is loaded */
var View = Backbone.View.extend({
el: '#listen_to_box',
/*associate DOM element on which you want to work on ,
In this case #listen_to_box is the ID of the div element with the checkbox */
events: {
'click [type="checkbox"]': 'clicked',
/*associate an event listener 'clicked' for
the click event on the checkbox , this is done using the Views events property*/
},
clicked: function (event) { /*The Handler function for the click event on the checkbox*/
console.log("events handler for " + this.el.outerHTML);
/* el.outerHTML has the markup or the HTML code of the DOM element associated with el,
in this case the 'div' element with the id of #listen_to_box is assigned to el */
}
});
var view = new View();
});
</script>
<div id="listen_to_box">
<input type="checkbox" />
</div>
</form>
</body>
</html>

Bind alert event to object

Here we will bind alert event to some object and then we will trigger the alert event.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Product = {};
_.extend(Product, Backbone.Events);
Product.bind("alert", function (msg) {
alert("Triggered " + msg);
});
Product.trigger("alert", "Alert Event Trigger Fired");
</script>
</form>
</body>
</html>

Summary

In this article, I explained how to use events in Backbone.js. In future articles we will understand more about Backbone.js with examples.