Post
Ask Question

Collections in Backbone.js

Introduction

This article explains collections in backbone.js. In this tutorial  we will simply learn about the collections and their implementation in backbone.js. Collections are sets of models and they are created by extending a "backbone.collection". When we create a collection then we can pass the property specification for the models that are used by the collection as well as an instance property.

Let's begin to understand collections in backbone.js. First we create an application to learn about collections.

  1. Create a Web application as in the following:
  • Start Visual Studio 2013, from the Start window select "New Project".
  • Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "Empty Web Application".

create Web Application

  • Click on the "OK" button.
  1. Now add the HTML page.
  • In the Solution Explorer,
  • Right-click on the project and select "Add" -> "HTML page".

Add HTML Page

  • Change the name of the page.

Change Name

  • Click on the "Add" button.

Add the following code:

<!DOCTYPE html>

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

<head>

    <title></title>

    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>

    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

    <script type="text/javascript">

        var Person = Backbone.Model.extend({

            initialize: function () {

                console.log('Person model initialize');

            },

            defaults: {

                name: 'undefined',

                age: 'undefined',

            }

        });

        var People = Backbone.Collection.extend({

            initialize: function () {

                console.log('people collection initialize');

            },

            model: Person

        });

        var person = new Person({ name: "joe" });

        var people = new People(person);

    </script>

</head>

<body>

</body>

</html>

 

 Execute the application and execute the browser. Select the console window and see the output as in the following:

Simple collection output

  1. Collections support the add() method for adding models to the collections. Now we will see how to add the models to the collection. We need to add this line of code for adding models:

people.add([{ name: "Bob"}, { name: "Jim" }]);

        console.log(people.models);

Now again execute the application:

Add model in collection

  1. For seeing the results in "JSON" add this line instead of the "console.log(people.models);":

console.log(people.toJSON());

Execute the application:

Display JSON result

  1. Collections support the remove() method for removing the model from the collection. Now we will see how to remove a model from the collection, we need to add this line of code:

 people.remove(person);

remove model

Now we can see that there is only two objects displayed.

  1. After removing and adding models individually, you might occasionally wish to update an entire collection at once, we use the refresh method to do that as in the following:

people.refresh([{ name: "Bob" }, { name: "Jim" }, person]);

        console.log(people.toJSON());

refresh collection

  1. For retrieving models from the collection by client id we use the getcid() method. Use it as in the following:

console.log(people.getByCid('c1'));

        console.log(people.models);

display Data by Cid


Similar Articles