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

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3089 red flag
Rating: 4 out of 5  
 1 vote(s)

In this article, we will learn the concept of collection in Backbone.js

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

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 visit previous articles here.

Part-1

Part-2

Part-3

Part-4

Part-5

part -6 

Part:-7

Part:-8

In this article associated with coming few of this series, we will learn the concept of Collection in Backbone.js. We know that Model is very similar with class in any object oriented programming language and Collection in Backbone.js is nothing but a set of similar type Model. We can store a set of Model within Collection. First we will know the basic structure of Collection in Backbone.js.

Example of simple collection

Like Model , we have to extend collection from Collection class of Backbone.js library. In this example we have extend “personCollection” from Backbone’s Collection library.

 var personCollection =
Backbone.Collection.extend({
                model: person
            });
 

Implement simple collection and push Model object

In our previous example, we have learned to create simple collection and in this example we will store few objects of Model class into it. At first we have created “person” model and then we are creating personCollection 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 = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
           
            var personCollection = Backbone.Collection.extend({
                model: person
            });
 
            //create object of person class
            var p1 = new person({});
            var p2 = new person({});
 
            //create object of personCollection
            var pc = new personCollection();
 
            //add object to person collection
            pc.add(p1);
            pc.add(p2);
            console.log('Number of object in collection' +  pc.length);
        </script>
    </form>
</body>
</html>

We are setting “person” as model property of “personCollection” collection and after that we are adding p1 and p2 object to “personCollection”  collection using add() method. Here we are printing the length of collection and it will show us the number of object(s) it contains. The output is showing 2 ,means there are 2 objects in this collection.


Another way to store object in collection

 This is another way to store data in collection. In this example we are not using add() method to add object within collection. In time of collection object creation we are initializing the objects into it. 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">
        <script>
            var person = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
           
            var personCollection = Backbone.Collection.extend({
                model: person
            });
 
            //create object of person class
            var p1 = new person({});
            var p2 = new person({});
           
            //create object of personCollection
            var pc = new personCollection([p1,p2]);
            console.log('Items in  Collection:- ' + pc.length);
        </script>
    </form>
</body>
</html>

Here is output of above example.


Set object in time of definition
It is possible to set object in time of collection definition. In this example we will add few type less objects within collection. Each object has two properties called "name" and "age". Have a look on below example.
<%@ 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 personCollection = new Backbone.Collection([
              { name: "Sourav", age:25 },
              { name: "ajay", age:26 },
              { name: "Manish", age:24 }
            ]);
console.log(JSON.stringify(personCollection));
 
        </script>
    </form>
</body>
</html>


We are seeing that the three objects has initiated within "personCollection" collection. We are printing it in JSON format.


Conclusion:-
In this article we have learned various approaches to configure collection in Backbone.js. Hope you understood them. In coming article we learn few more concepts of collection 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)