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

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

In this article we will learn events in backbone.js

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

Welcome to “Demystify Backbone.js” article series. In our previous article we have covered various important 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

Currently we are talking about event binding of Backbone.js. In previous two articles we have learned to bind event with object and Model in Backbone.js.

Bind ‘add’ event to collection

In this example we will learned to bind “add” event to collection of Backbone.js . The ‘add’ event will fire when we will try to add object to collection. Here is sample example to understand the concept.

<%@ 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({
               defaults: {
                   name : '',
                   surname : '',
               }
           });
 
           var PersonCollection = Backbone.Collection.extend({
               model : PersonModel,
               initialize : function () {
                   this.bind('add',this.newPerson,this);
               },
               newPerson: function (model) {
                   console.log('welcome '+ model.get('name'));
               },
           });
           var PersonClass = new PersonCollection();
 
           var p = ({name:'Sourav'});
           PersonClass.add(p); //this will trigger add event on our collection
          
        </script>
    </form>
</body>
</html>

Output of above example is here.


Unbind ‘add ’ event to collection

This is reverse process of bind() method. Using unbind() method we can release any previously bind event. In this example at first we will bind ‘add’ method and then we will unbind it using unbind() function.

<%@ 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({
               defaults: {
                   name : '',
                   surname : '',
               }
           });
 
 
           var PersonCollection = Backbone.Collection.extend({
               model : PersonModel,
               initialize : function () {
                   this.bind('add', this.someChange, this);
 
               },
               someChange: function (model) {
                   console.log('New Person Added');
                   this.unbind('add');
               },
           });
 
           var PersonClass = new PersonCollection();
           var p = ({name:'Sourav'});
           PersonClass.add(p); //this will trigger add event on our collection
 
           var p1 = ({ name: 'Ram' });
           PersonClass.add(p1); //this will trigger add event on our collection
          
        </script>
    </form>
</body>
</html>

The bind() method will fire only for first add() operation. And then it will unbind. So that we are getting output only for first add() operation.


Conclusion:-

In this article we have understood to bind ‘add’ event with collection of Backbone.js. Hope you understood the concept. In next articles, we will see more examples on 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)