Demonstrating Backbone.js: Implement Collections Part 3

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.

Push Model Object to Collection

Here we have “Product” as a model property of a “ProductCollection” collection and we have added a p1 and p2 object to the “ProductCollection” collection using the add() method and we are displaying the length of the collection.

<%@ 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 src="backbone/Jquery.js" type="text/javascript"></script>

    <script src="backbone/underscore-min.js" type="text/javascript"></script>

    <script src="backbone/backbone-min.js" type="text/javascript"></script>

</head>

<body>

    <script type="text/javascript">

        var Product = Backbone.Model.extend({

            defaults: {

                name: 'Iphone',

                manufacturer: 'Apple'

            }

        });

        var ProductCollection = Backbone.Collection.extend({

            model: Product

        });

        //create object of Product class

        var product1 = new Product({});

        var product2 = new Product({});

        //create object of ProductCollection

        var productcollection = new ProductCollection();

        //add object to Product collection

        productcollection.add(product1);

        productcollection.add(product2);

        console.log('Total Number of object in collection' + productcollection.length);

    </script>

</body>

</html>

Output

Push Model Object
Display collection in JSON format

<%@ 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 src="backbone/Jquery.js" type="text/javascript"></script>

    <script src="backbone/underscore-min.js" type="text/javascript"></script>

    <script src="backbone/backbone-min.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <script type="text/javascript">

        var ProductCollection = new Backbone.Collection([

{ name: "Iphone", quantity: 5 },

{ name: "Xperia", quantity: 10 },

{ name: "GalaxyGrand", quantity: 20 }

]);

        console.log(JSON.stringify(ProductCollection));

    </script>

    </form>

</body>

</html>

 
Output

Collection in JSON format
 
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

Up Next
    Ebook Download
    View all
    Learn
    View all