Collection Binder Using Backbone.js

Introduction

This article describes the Collection binder using backbone.js. Backbone is a great platform for creating client-side applications. In this tutorial we will create a new class, "Backbone.CollectionBinder". The Collection binder is similar to the model binder.bine() function but it has one extra property, it will also create a nested element view.

 In this tutorial you will see that here is a row of a table bound to the collection.

Here we need the following JavaScript files:

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

    <script type="text/javascript" src="js/jquery.js"></script>

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

    <script type="text/javascript" src="js/Backbone.ModelBinder.js"></script>

    <script type="text/javascript" src="js/Backbone.CollectionBinder.js"></script>

Now let's see how the collection binder works.

  1. First we need to create an application.
  • Start Visual Studio 2013.
  • From the Start window select "New Project".
  • Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio2012" and select as in the following:

Create Web Application

  • Click on the "OK" button.
  1. Now add the 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.

Change Name

  • Then click on the "OK" button.

Add the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />

    <title>Test the CollectionBinder With the ElManagerFactory</title>

    <!-- include source files here... -->

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

    <script type="text/javascript" src="js/jquery.js"></script>

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

    <script type="text/javascript" src="js/Backbone.ModelBinder.js"></script>

    <script type="text/javascript" src="js/Backbone.CollectionBinder.js"></script>

    <script>

        $().ready(function () {

            collection = new Backbone.Collection([

                { id: 0, UserName: 'Smith', Address: 'Delhi' },

                { id: 1, UserName: 'Jhon', Contact: '8574034186S' }

            ]);

            view = new Backbone.View();

            view.setElement($('#viewContent'));

            var createrow = '<tr><td data-name="UserName"></td><td data-name="Address"></td><td data-name="Contact"></td></tr>';

            var elManagerFactory = new Backbone.CollectionBinder.ElManagerFactory(createrow, "data-name");

            collectionBinder = new Backbone.CollectionBinder(elManagerFactory);

            collectionBinder.bind(collection, view.$('tbody'));

            collectionBinder.on('elCreated'function (model, el) {

                console.log('The collectionBinder created an element ', model, el);

                var elManager = collectionBinder.getManagerForEl(el);

                console.log('\tThe elManager and model for the clicked element is ', elManager, elManager.getModel());

            });

            collectionBinder.on('elRemoved'function (model, el) {

                console.log('The collectionBinder removed an element ', model, el);

            });

            modelCreateCount = 2;

            $('#addmodel').on('click'function () {

                collection.add({ id: modelCreateCount, UserName: 'UserName ' + modelCreateCount, Address: 'Address ' + modelCreateCount, Contact: 'contact ' });

                modelCreateCount++;

            });

 

            $('#deletemodel').on('click'function () {

                if (collection.length > 0) {

                    collection.remove(collection.at(collection.length - 1));

                }

            });

            modelUpdateCount = 0;

            $('#updatemodel').on('click'function () {

                if (collection.length > 0) {

                    collection.at(collection.length - 1).set({ Contact: 'phone ' + modelUpdateCount });

                    modelUpdateCount++;

                }

            });

            $('#resetdata').on('click'function () {

                collection.reset();

            });

        });

    </script>

</head>

<body>

    <br>

    Different Actions

    <br>

    <input type="button" id="addmodel" value="Add New Model" />

    <input type="button" id="deletemodel" value="Delete Last Model" />

    <input type="button" id="updatemodel" value="Update Last Model's Contact" />

    <input type="button" id="resetdata" value="Reset Collection" />

    <br>

    <br>

    View content:<hr>

    <div id="viewContent">

        <table>

            <thead>

                <tr>

                    <th>User Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>

                    <th>Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>

                    <th>Contact No&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

</body>

</html>

 

  1. Now execute the aplication:

DisplayOutputimage

When we click on the "AddnewMode" then it adds other new data to the table.

Add new model

Now when we click on the "Delete LastModel" then delete the last data of the table. And If we click on the "Update LastModel'scontact" then it updates the last contact data of the table.