Backbone Collection Example

Written by Backbone Tutorials Team

Last updated: June 2026 · 8 min read

A Backbone collection manages an ordered group of models, and this example shows it doing real work: loading records from an API, keeping them sorted, adding and removing items, and firing events as the group changes. It uses Backbone.js 1.6.0 and the same REST conventions the rest of the site references.

The concept page is what is a collection in Backbone.js. Read that for the idea, then run this for the mechanics.

What this example builds

The example loads a list of tasks from a REST endpoint, keeps them ordered by priority, and reacts whenever a task is added or removed.

The behaviour you will see

Calling fetch fills the collection with models from the server, adding a task fires an add event, and removing one fires remove. A comparator keeps the list sorted at all times. A view bound to these events can redraw the list automatically as the group changes.

Defining the collection

A collection is declared by extending Backbone.Collection and pointing it at a model and a URL.

The collection code

var Task = Backbone.Model.extend({
  defaults: { title: "", priority: 1 }
});

var Tasks = Backbone.Collection.extend({
  model: Task,
  url: "/api/tasks",
  comparator: "priority"
});

var tasks = new Tasks();

Fetching records from an API

One call loads every record and turns each into a model inside the collection.

Loading the data

tasks.fetch({
  success: function () {
    console.log(tasks.length + " tasks loaded");
    console.log(tasks.pluck("title"));
  }
});

After fetch resolves, the collection holds one model per record returned, and helpers like pluck read a single attribute across all of them. The model behind each record is shown in the Backbone model example.

Adding and removing models

Changing the contents of a collection fires events that the interface can listen to.

Add, remove, and listen

tasks.on("add", function (model) {
  console.log("added: " + model.get("title"));
});
tasks.on("remove", function (model) {
  console.log("removed: " + model.get("title"));
});

tasks.add({ title: "Write docs", priority: 2 });
tasks.remove(tasks.at(0));

Because the comparator is set, the new task is inserted in sorted position rather than at the end.

Sorting with a comparator

The comparator tells the collection how to keep its models ordered.

How ordering works

Setting comparator to an attribute name, here "priority", keeps the collection sorted by that field automatically as models are added. For custom ordering you can supply a function that returns a sort value, or one that compares two models directly. Either way the collection stays ordered without you calling sort by hand, so any view iterating the collection always shows items in the right sequence.

Common pitfalls

Three mistakes account for most collection confusion.

What usually goes wrong

The most common is forgetting to set model on the collection, so fetched records stay as plain objects without model methods. The second is mutating the underlying array directly instead of using add and remove, which skips the events a view depends on. The third is expecting a render after every change to be efficient on large lists, when listening to the collection update event once is cheaper than redrawing on every add. The concept is covered in what is a collection.

Read next: the SPA routing example, or back to the Examples hub.