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.
- 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".
- Click on the "OK" button.
- Now add the HTML page.
- In the Solution Explorer,
- Right-click on the project and select "Add" -> "HTML page".
- Change the name of the page.
- 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:
- 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:
- For seeing the results in "JSON" add this line instead of the "console.log(people.models);":
console.log(people.toJSON());
Execute the application:
- 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:
Now we can see that there is only two objects displayed.
- 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());
- 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);