Backbone.js Collections

Collections have a bunch of different usages in Backbone.js, but at their core they are basically arrays of models. If you are unfamiliar with Backbone models it might be a good idea to check out post on Backbone.js Models It’s a fairly quick introduction so it shouldn’t take too long to consume.

Collections, being groups of models, are good for displaying lists of data. So if you wanted, for example, to display a list of musical artists, the model would be an “Artist,” containing the artist name, birthday, hometown, favoriteColor or any other information that we’d want to use in our application, and the collection (array of models) would be “Artists.” To create a collection as an ordered set of models you have to specify which type of model your collection holds by setting the model property.

var Artists = Backbone.Collection.extend({
    model: Artist
});

Again for demonstration, we’re going to actually need some models to use our collection. So let’s create one with some defaults (which we’ll be overriding anyway).

var Artist = Backbone.Model.extend({
    defaults: {
        name: 'New Artist',
        birthday: 'January 1, 1970',
        hometown: 'Los Angeles, CA',
        favoriteColor: 'blue',
    }
});

Now to instantiate a few models….

var biggie = new Artist({ id: 1, name: 'Notorious BIG', birthday: 'May 21, 1972', hometown: 'Brooklyn, NY', favoriteColor: 'green' });
var mike = new Artist({ id: 2, name: 'Mike Jones', birthday: 'January 6, 1981', hometown: 'Houston, TX', favoriteColor: 'blue' });
var taylor = new Artist({ id: 3, name: 'Taylor Swift', birthday: 'December 13, 1989', hometown: 'Reading, PA', favoriteColor: 'red' });

Note: When developing Backbone applications (or any other application for that matter) you’ll want to give your models an id property. It makes things much easier when working with lists and they’re required for doing any sort of retrieving and/or saving models from the database using the fetch and the save or sync methods.

Read More »