BackBone Tutorial – Part 5: Understanding Backbone.js Collections

In this article we will discuss about Backbone.js collections. We will see how we can use collections to manipulate a group of models and how we can use restul API to easily fetch and save collections.

Background

Every application need to create a collection of models which can be ordered, iterated and perhaps sorted and searched when a need arises. Keeping this in mind, backbone also comes with a collection type which makes dealing with collection of models fairly easy and straight forward.

Link to complete series:

Link to complete series:

  1. BackBone Tutorial – Part 1: Introduction to Backbone.Js[^]
  2. BackBone Tutorial – Part 2: Understanding the basics of Backbone Models[^]
  3. BackBone Tutorial – Part 3: More about Backbone Models[^]
  4. BackBone Tutorial – Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service[^]
  5. BackBone Tutorial – Part 5: Understanding Backbone.js Collections[^]
  6. BackBone Tutorial – Part 6: Understanding Backbone.js Views[^]
  7. BackBone Tutorial – Part 7: Understanding Backbone.js Routes and History[^]
  8. BackBone Tutorial – Part 8: Understanding Backbone.js Events[^]

Using the code

Let us start looking at the backbone collections in details.

Creating a collection

Creating a backbone collection is similar to creating a model. We just need to  extend the backbone’s collection class to create our own collection. Let us continue working with the same example where we created a  Book model and lets try to create a simple  BooksCollection.

This collection will hold the Book model we have created in our previous articles.

Specifying the model for a collection

To specify which model this collection should hold, we need to specify/override the  model property of the collection class.

Once we specify the  model property of a collection what will happen internally is that whenever we create this collection, internally it will create an array of the specified models. Then all the operations on this collection object will result in the actual operations on that array.

Instantiating a collection

A collection can be instantiated by using the  new keyword. We can create an empty collection and then add the model objects to it later or we can pass a few model objects in the collection while creating it.

Adding models to collection

To add an item to a collection, we can use the  add method on the collection. The important thing to notice here is that if the item with the same  id exist in the collection, the add will simply be ignored.

Now there might be a scenario where we actually want to update an existing added model in a collection. If that is the case, then we need to pass the  {merge: true} option in the add function.

Another important point to consider here is that the collection keep a shallow copy of the actual models. So if we change a model attribute after adding it to a collection, the attribute value will also get changed inside the collection.

Also, if we want to add multiple models, we can do that by passing the model array in the  add method.

It is also possible to add the model at a specific index in the collection. To do this we need to pass the  {at: location} in the  add options.

Note:  push and  unshift function can also be used to add models to collection.

Removing models from collection

To remove the model from the collection, we just need to call the remove method on the collection. The  remove method simply removes this model from the collection.

Also, if we want to empty the model, we can call the  reset method on the collection.

It is also possible to reset a collection and populate it with new models by passing an array of models in the reset function.

Note: pop and shift function can also be used to remove model from collection.

Finding the number of items in collection

The total number of items in a collection can be found using the  length property.

Retrieving models from collection

To retrieve a model from a specific location, we can use the  at function by passing a 0 based index.

Alternatively, to get the index of a known model in the collection, we can use the  indexOf method.

We can also retreive a model from a collection if we know its  id or  cid. this can be done by using the  get function.

If we want to iterate through all the models in a collection, we can simply use the classic  for loop or the  each function provided by collections which is very similar to the foreach loop of underscore.js.

Listening to collection events

Backbone collection raises events whenever an item is added removed to updated in the collection. We can subscribe to these events by listening to  addremove and  change event respectively. Let us subscribe to these events in our model to see how this can be done.

The set function

The  set function can be used to update all the items in a model. If we use set function, it will check for all the existing models and the models being passed in set. If any new model is found in the models being passed, it will be added. If some are not present in the new models list, they will be removed. If there are same models, they will be updated.

The above shown set function will call remove for book2, change for book3 and add for book5.

Sorting a collection

Backbone keeps all the models in the collection in a sorted order. We can call the  sort function to forcefully sort it again but the models are always stored in sorted order. By default these items are sorted in the order they are added to the collection. But we can customize this sorting behavior by providing a simple comparator to our collection.

What this comparator does is that it overrides the default sorting behavior by specifying the attribute that should be used for sorting. We can even used a custom expression in this comparator too.

Fetch collection using HTTP REST service

To be able to  fetch the collection from the server, we need to specify the  url for the api that returns the collection.

Now to  fetch the collection from the server, lets call the fetch function.

Save collection using HTTP REST service

Lets see how we can save the items of a collection on the server.

In the above code we are calling save on each model object. this can be improved by either overriding the sync function on a collection or perhaps creating a wrapper model for collection and saving the data using that.

Note: The web api code for can be downloaded from the previous article of the series.

Point of interest

In this article we have discusses about the backbone collections. This has been written from a beginner’s perspective. I hope this has been informative.

Download sample code for this article: backboneSample

3 thoughts on “BackBone Tutorial – Part 5: Understanding Backbone.js Collections