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.