Demystify Backbone.js: Implement Collection in Backbone.js –Part-12

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

In this article series, we will understand more concepts of collection in Backbone.js.

Demystify Backbone.js: Implement Collection in Backbone.js –Part-12

This is “Demystify Backbone.js” article series, here we are discussing all about Backbone.js. We have understood the concept of Model and Collection of Backbone.js with suitable example. You can visit our whole series here.

Part-1

Part-2

Part-3

Part-4

Part-5

part -6

Part:-7

Part:-8

Part:-9

Part:10

Part:-11

Bind method in collection

It’s very much necessary to implement such notification mechanism which will fire when specific data will get change. For example we want to generate a trigger when people will change some data in Backbone.js. For that we have to bind some function with Model data. In this example we have bind “add” method with “person” collection.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<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 person = new Backbone.Collection;
 
            person.bind("add", function (person) {
                console.log("Name Added:-" + person.get("name"));
            });
 
            person.add([
              { name: "Sourav" },
              { name: "Manish" }
            ]);
        </script>
    </form>
</body>
</html>

The advantage is that, when we will add any object to “person” collection this bonded method will get fire. In this example we are adding two Model objects to this collection and here is output.


Bind ‘delete’ method to collection

In previous example we have seen to bind function in “add” event with Backbone.js Collection. In this example we will learn to bind “delete” event with Collection. Try to understand 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">
        <script>
           
            var person = new Backbone.Collection;
 
            person.bind("add", function (person) {
                console.log("Name Added:-" + person.get("name"));
            });
 
            person.bind('remove', function (person) {
                console.log("Name " + person.get('name')+ ' Deleted from collection');
               
            });
 
            person.add([
              { name: "Sourav" },
              { name: "Manish" }
            ]);
 
            person.remove(person.at(0).cid);
 
 
        </script>
    </form>
</body>
</html>

At first we are adding two items/ objects and then we are removing one object using remove() function with the help of “cid” . This “cid” or any indexing mechanism is needed to remove any object from collection. Here is output of above example.


Unbind any method to collection.

It’s just opposite to bind method. We can unbind any specific method from Collection. The unbind() function takes event name as parameter.

<%@ 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 person = new Backbone.Collection;
 
            person.bind("add", function (person) {
                console.log("Name Added:-" + person.get("name"));
            });
 
            person.bind('remove', function (person) {
                console.log("Name:- " + person.get('name')+ ' Deleted from collection');
                
            });
 
            //unbind add method from collection
            person.unbind('add');
 
            person.add([
              { name: "Sourav" },
              { name: "Manish" }
            ]);
 
            person.remove(person.at(0).cid);
        </script>
    </form>
</body>
</html>

In this example at first we have bonded “add” and “remove” event and then we have unbind “add” event and after that we are adding few model object to Collection. We are getting blank skin in output window; means ‘add’ is not firing.


Unbind all bonded method in collection

If we do not pass any event name associated with unbind() function then it will unbind all events associated with current Collection. In this example both ‘add’ and ‘remove’ event will unbind from “person” Collection.

<%@ 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 person = new Backbone.Collection;
            person.bind("add", function (person) {
                console.log("Name Added:-" + person.get("name"));
            });
 
            person.bind('remove', function (person) {
                console.log("Name:- " + person.get('name')+ ' Deleted from collection');
            });
 
            //unbind all binded method in collection
            person.unbind();
 
            person.add([
              { name: "Sourav" },
              { name: "Manish" }
            ]);
            person.remove(person.at(0).cid);
 
        </script>
    </form>
</body>
</html>

Here is sample output of this example.


 

Conclusion:-

In this article we have learned the concept of bind() and unbind() method of Backbone Collection. This is one good data monitoring mechanism in Backbone.js. Hope you like it.

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)