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

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

In this article we will learn events in backbone.js

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

Welcome to Demystify Backbone.js article series. In this series we are learning various concepts of Backbone.js. We have learned about Model , View and collection in our previous articles. You can read the complete series 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


In this article we will learn to bind any event to any object. The event binding is very useful when we want to monitor some object.

For example, we want to track the change of some object and when change will occur ,we will fire one event to do some other task.

Bind alert event to object

This is the first example of event binding to object. Here we will bind alert event to some object and then we will trigger the alert event. Here is sample code implementation.

<%@ 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 object = {};
           _.extend(object, Backbone.Events);
           object.bind("alert", function (msg) {
               alert("Triggered " + msg);
           });
           object.trigger("alert", "Alert Event Trigger");
 
        </script>
    </form>
</body>
</html>

We are using trigger() method to trigger alert event which we have bind with “object”. Here is output of above code.


Bind custom event to object

In the previous example we have seen to bind alert event to object, the alert event is predefined. We are allowed to bind our custom event to object. Here is example to bind custom event to object.

<%@ 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 object = {};
 
           _.extend(object, Backbone.Events);
 
           object.bind("poke", function () {
               console.log("Ouch, you just poke me");
           });
 
           object.bind("kick", function () {
               console.log("Ouch, you just kick me");
           });
 
           object.trigger("poke");
           object.trigger("kick");
 
        </script>
    </form>
</body>
</html>

In this example we have bind “poke” and “kick” event to “object”. Both are custom event which we have defined by us. At last we are using trigger() function to trigger both event. This is the output of above example.


Bind change event to Model class

In this example we will see how to bind change event to Model class in Backbone.js.  The change event will fire when we will try to change model data.

<%@ 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 PersonModel = Backbone.Model.extend({
 
               initialize: function () {
                   this.bind('change',this.someChange,this); //when some property in this object has changed, run this.someChange() function
               },
               someChange: function(model,options){
                   console.log('something has changed');
               },
               defaults: {
                   Name : 'Sourav',
                   Surname : 'Kayal',
               }
           });
           var p = new PersonModel();
           p.set({'Name':'new name'});
          
        </script>
    </form>
</body>
</html>


We are passing current model to change callback function and if needed we can track changed data within change callback function.

 Conclusion:-

In this article we have learned to bind event with JavaScript object and Model of Backbone.js. In coming articles in this series we will understand few more concepts of event binding in Backbone.js.

 


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)