Backbonejs

Using Collection View in Backbone.js

Introduction

This article explains the use of a collection view in backbone.js. In this application we will create a model, router and view. Models are used for keeping the actual data, they use the data for communicating  between client and server using the fetch() and save() methods.

        A router is away to populate the data into the model and collection and depending on necessities the data is displayed using the view.

         Views are responsible for rendering the stuff on the screen.

Use the following procedure to create the application:

  1. First we will create a web application as in the following:
  • Start Visual Studio 2013.
  • From the Start window select "New Project".
  • Select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".

Add Web Application

  • Click on the "OK" button.
  1. Now Add an HTML page to the project:
  • 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 "OK" button.

Add the following code:

<!DOCTYPE html>

<html>

<head>

    <title>Collection View Sample Code</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="http://underscorejs.org/underscore-min.js"></script>

    <script src="http://backbonejs.org/backbone-min.js"></script>

    <script src="js/Model.js"></script>

    <script src="js/Router.js"></script>

    <script src="js/View.js"></script>

</head>

<body>

    <h1>Backbone.js Collection View example</h1>

       <table>

        <thead>

            <tr>

                <th>Name</th>

                <th>Address</th>

            </tr>

        </thead>

        <tbody></tbody>

    </table>

</body>

</html>

  1. Now add a folder named "js" for adding JavaScripts such as "Model.js", "View.js" and "Router.js." In the Solution Explorer, right-click on the "js" folder add then select "New item" and the JavaScript file.

Add JavaScript file

 In the Model.js script file add the following code:

var models = {};

models.Person = Backbone.Model.extend({

    validate: function (attributes) {

        if (typeof attributes.Name !== 'string') {

            return 'Name is mandatory';

        }

        if (typeof attributes.Name !== 'string') {

            return 'Address is mandatory';

        }

    }

});

models.People = Backbone.Collection.extend({

    model: models.Person

});

 

In the code above we defined the model name "person" and there we use the "validation" keyword that specifies we perform the validation in the model.

In the "View.js" write this code:

var views = {};

views.PeopleItem = Backbone.View.extend({

       tagName: 'tr', 

    initialize: function (options) {

        _.bindAll(this, 'render');

        this.model.bind('change', this.render);

    },

    render: function () {  

        jQuery(this.el).empty();

        jQuery(this.el).append(jQuery('<td>' + this.model.get('Name') + '</td>'));

        jQuery(this.el).append(jQuery('<td>' + this.model.get('Address') + '</td>'));

        return this;

    }

});

views.People = Backbone.View.extend({

    collection: null,  

    el: 'tbody',

    initialize: function (options) {

        this.collection = options.collection;

        _.bindAll(this, 'render');

        this.collection.bind('reset', this.render);

        this.collection.bind('add', this.render);

        this.collection.bind('remove', this.render);

    },

    render: function () {

        var element = jQuery(this.el);

        element.empty();

        this.collection.forEach(function (item) {

            var itemView = new views.PeopleItem({

                model: item

            });

            element.append(itemView.render().el);

        });

        return this;

    }

});

 

In the code above the use of "tagName:'tr'" specifies that everyone is displayed in the table row.

 

jQuery(this.el).append(jQuery('<td>' + this.model.get('Name') + '</td>'));

        jQuery(this.el).append(jQuery('<td>' + this.model.get('Address') + '</td>'));

 

This code specifies the columns of the table in which the data will be stored.

In the "Router.js" file write this code:

var Router = Backbone.Router.extend({

    routes: {

        '': 'index' 

    },

    index: function () {

               var people = new models.People([

          {

              Name: 'John',

              Address: 'Mumbai'

          },

          {

              Name: 'Smith',

              Address: 'Delhi'

          },

        {

            Name: 'Joy',

            Address: 'Banaras'

        },

       {

           Name: 'Jeny',

          Address: 'Banglore'

       }

       ]);

        var view = new views.People({

            collection: people

        });

        view.render();

        people.add([

            {

                Name: 'Zaphod',

                Address: 'Kolkata'

            }

        ]);

    }

});

jQuery(document).ready(function () {

    var router = new Router();

    Backbone.history.start();

});

  1. Execute the application:

Display collection value

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs