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

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

In this article, we will learn more about collection in Backbone.js.

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

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

Part-1

Part-2

Part-3

Part-4

Part-5

part -6

Part:-7

Part:8

Part:-9

Part:-10


In this article we will learn to create Collection on fly in Backbone.js. So far we have learned that Collection belongs to particular Mode, but it’s not very true. We can implement Collection on fly , without considering any particular Model class.

Create collection on fly/ Model Independent collection

This is the example to implement Collection without depend on any particular Mode. In this sample code we have defined “personCollection” and within that we are setting object. Those objects have common name and surname property, but they does not belongs to any Model class of Backbone.js.

<%@ 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 personCollection = new Backbone.Collection([
                { name:'Sourav',surname:'Kayal'},
                { name: 'Ram', surname: 'Das' },
                { name: 'Nontey', surname: 'Banerjee' },
                { name: 'Manish', surname: 'Khanra' },
            ]);
            console.log('Number of person:- ' + personCollection.length);
           
 
        </script>
    </form>
</body>
</html>

Here is output of above example.


Fetch part of collection using pluck() method

In our previous example we have learned to create Collection on fly. In this example we will learn to fetch particular property set of Collection object using pluck() method. Pluck() is one method of Collection class which takes property name as parameter of Model object. Here is code implementation for 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 personCollection = new Backbone.Collection([
                { name:'Sourav',surname:'Kayal'},
                { name: 'Ram', surname: 'Das' },
                { name: 'Nontey', surname: 'Banerjee' },
                { name: 'Manish', surname: 'Khanra' },
            ]);
            var names = personCollection.pluck("name");
            console.log(JSON.stringify(names));
        </script>
    </form>
</body>
</html>

In output we are seeing that only the “name” property has fetched from Collection.


 

Conclusion:-

In this short article we have learned the use of pluck() method and type less Collection of Backbone.js. Those are useful to develop application using Backbone.js. In coming article we will understand few more concepts of Collection.


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)