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.
Now let's see how the collection binder works.
<!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 </th>
<th>Address </th>
<th>Contact No </th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
When we click on the "AddnewMode" then it adds other new data to the table.
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.