Demystify Backbone.js: Event in Backbone.js –Part-16

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 4406 red flag

In this article we will learn events in backbone.js

Demystify Backbone.js: Event in Backbone.js –Part-16

This is “Demystify Backbone.js” article series. In the previous articles of this series we have learned various concepts of Backbone.js. You can read them here.

 Part-1

Part-2

Part-3

Part-4

Part-5

part -6

Part:-7

Part:-8

Part:-9

Part:10

Part:-11

Part:-12

Part:-13

Part:-14

Part:-15

 

In previous three articles (Part 13,14,15)  we have learned to bind event in JavaScript object, Model and collection in Backbone.js. In this article we will learn to bind event with view. We know that view in Backbone.js is used to display and rendering operation.

Button click event of View template

The view can able to import template from internal DOM or from external HTML file. In this example we have created one template which contains one button and we are importing this template within view of Backbone.js. Have a look on below code.

<%@ 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">
 
        <div id="container-temp">
            <input type="button" id="btnClick" value="Click Me" />
        </div>
       <script>
 
           var TestView = Backbone.View.extend({
               el: "#container-temp",
               initialize: function () {
               },
               events: {
                   "click #btnClick": "clickButton"
               },
 
               clickButton: function (event) {
                   console.log('Someone has clicked on Button');
               }
           })
 
           var v = new TestView();
          
        </script>
    </form>
</body>
</html>


Text change event of view template

In previous example we seen click event of button. In this example we will understand the text change event of textbox. This is sample code for that.

<%@ 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">
 
        <div id="container-temp">
            Enter your name:- <input type="text" id="txtName" />
        </div>
 
       <script>
 
           var TestView = Backbone.View.extend({
               el: "#container-temp",
               initialize: function () {
               },
               events: {
                   "change #txtName": "textChange"
 
               },
 
               textChange: function (event) {
                   console.log(event);
                   console.log('Text has changed in Text box');
               }
           })
 
           var v = new TestView();
          
        </script>
    </form>
</body>
</html>

The text change event will occur when we will write something into text box. Here is output of above example.

Execute click event of button using class

In first example we have used id of button to track click event onto it. In some situation it might necessary to trigger same callback function for multiple elements.  In this scenario we can use class in place of ID. Here is sample implementation of that.

<%@ 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">
 
        <div id="container-temp">
            <input type="button"  class="btn" value="Button1" />
            <input type="button"  class="btn" value="Button2" />
        </div>
 
       <script>
 
           var TestView = Backbone.View.extend({
               el: "#container-temp",
               initialize: function () {
               },
               events: {
                   "click .btn": "clickButton"
               },
 
               clickButton: function (event) {
                   console.log(event);
                   //console.log('Text has changed in Text box');
               }
           })
 
           var v = new TestView();
          
        </script>
    </form>
</body>
</html>



Conclusion:-

In this article we have learned to trigger event from view in Backbone.js. The main object is that, we have to bind particular event with some element within view. Hope you understood and following the series.


 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)