Demonstrating Backbone.js: Implement Collections Part 4

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use collections in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections You can get them from the following:

In this article we will see a few more concepts of collections in Backbone.js.

How to fetch value from collection?
 
In previous articles we have seen that a cid is automatically assigned for each and every object. So now we can access that object using its cid..

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" 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 Product = Backbone.Model.extend({

            defaults: {

                name: 'Xperia',

                manufacturer: 'Sony'

            }

        });

        //create object of Prdocut class

        var product1 = new Product({});

        var cid = product1.cid;

        console.log('cid of first object:- ' + product1.cid);

        var product2 = new Product({});

        //create object of Collection by passing model name

        var productcollection = Backbone.Collection.extend({

            model: Product

        });

        var collection = new productcollection;

        collection.add(product1, product2);

        var p = collection.get(cid)

        console.log('Name:- ' + p.get('name'));

        console.log('Manufacturer:- ' + p.get('manufacturer'));

    </script>

    </form>

</body>

</html>
 
Output

fetch value from collection
 
Using the each() function to iterate the collection
 
We can display all the model objects using the each() function in backbone.js as shown in the following snippet:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" 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 Product = Backbone.Model.extend({

            defaults: {

                name: 'Iphone',

                manufacturer: 'Apple'

            }

        });

        //create object of person class

        var product1 = new Product({});

        var product2 = new Product({});

        //create object of Collection by passing model name

        var productcollection = Backbone.Collection.extend({

            model: Product

        });

        var collection = new productcollection;

        collection.add(product1);

        collection.add(product2);

        console.log('Total Number of Item in Collection:- ' + collection.length);

        collection.each(function (model) {

            console.log('Name:- ' + model.get('name'));

            console.log('Manufacturer:- ' + model.get('manufacturer'));

        });

    </script>

    </form>

</body>

</html>

each function

  
Summary

In this article, I explained how to use collections in Backbone.js, In future articles we will understand more about Collections with examples.

Previous article:   Demonstrating Backbone.js :Implement Collections Part 3

Up Next
    Ebook Download
    View all
    Learn
    View all