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

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

In this article, we will learn few more concepts of collection in Backbone.js

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

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

Part-1

Part-2

Part-3

Part-4

Part-5

part -6

Part:-7

Part:-8


at() function to get object by index

We can fetch particular object from collection using at() function, at() function takes one index as argument. The indexing starts from ‘0’ like array.

<%@ 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 = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
           
            //create object of person class
            var p1 = new person({});
            var p2 = new person({});
 
            //create object of Collection by passing model name
            var pc = Backbone.Collection.extend({
                model:person
            });
           
            var col = new pc;
            col.add(p1, p2);
            var p = col.at(0);
            console.log('Name:- ' + p.get('name'));
            console.log('Surname:- ' + p.get('surname'));
        </script>
    </form>
</body>
</html>

In this example we are getting 0th element from the “pc” collection then we are printing name and surname property of it. Here is sample output of above example.


Fetch value from collection using “cid”

The beauty of object of any Backbone.js Model is that one id called “cid” automatically assign with each and every object.  As this is one type of identity element, we can select object from collection using “cid” .In this example we are print the “cid” of 0th element from Model Collection and then we are accessing that object using it’s “cid” property.

<%@ 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 = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
           
            //create object of person class
            var p1 = new person({});
            var cid = p1.cid;
            console.log('cid of first object:- ' + p1.cid);
 
            var p2 = new person({});
 
            //create object of Collection by passing model name
            var pc = Backbone.Collection.extend({
                model:person
            });
           
            var col = new pc;
            col.add(p1, p2);
            var p = col.getByCid(cid)
            console.log('Name:- ' + p.get('name'));
            console.log('Surname:- ' + p.get('surname'));
        </script>
    </form>
</body>
</html>

Here is sample output of above code example.


Iterate collection using each() function

If we want to print all the Model object from Backbone.js Collection, we can use each() callback function. This function will traverse all the Collection element/object. Have a look on below example.

<%@ 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 = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
 
            //create object of person class
            var p1 = new person({});
            var p2 = new person({});
 
            //create object of Collection by passing model name
            var pc = Backbone.Collection.extend({
                model: person
            });
 
            var col = new pc;
            col.add(p1);
            col.add(p2);
            console.log('Number of Item in Collection:- ' + col.length);
 
            col.each(function (model) {
                console.log('Name:- ' + model.get('name'));
                console.log('Surname:- ' + model.get('surname'));
            });
           
        </script>
    </form>
</body>
</html>

We are getting name and surname property of each object which we have pushed to Collection.


 

Conclusion:-

In this article we have learned few functions to manipulate Collection data in Backbone.js. Hope you have learned to process Collection data. In coming article we will understand few more concepts on the same.


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)