What are Collections in Backbone.js?

In one sentence a Collections can be referred to as an ordered set of models. As its name suggests, it is a collection of models in an orderly way. It can be used in situations such as;

  • Model: Student, Collection: ClassStudents
  • Model: Todo Item, Collection: Todo List
  • Model: Animal, Collection: Zoo

Typically your collection will only use one type of model but models themselves are not limited to a type of collection;

  • Model: Student, Collection: Gym Class
  • Model: Student, Collection: Art Class
  • Model: Student, Collection: English Class

Here is a generic Model/Collection example :

//Creating a new model Chapter with defaults and initialize conditions
var Chapter = Backbone.Model.extend({
  defaults: {
    name: "Not specified",
    author: "Not specified"
  },
  initialize: function(){
    console.log("Initialized.");
  }
});
//Creating a new collection named Book and adding the model Chapter
var Book = Backbone.Collection.extend({ model: Chapter});
//creating instances
var chapter1 = new Chapter({ name: "Chapter 1", author: "Author 1" });
var chapter2 = new Chapter({ name: "Chapter 2", author: "Author 2" });
var chapter3 = new Chapter({ name: "Chapter 3", author: "Author 3" });
//Adding models to the collection
var myBook = new Book([ chapter1, chapter2, chapter3]);
console.log( myBook .models );
//Result : [ chapter1, chapter2, chapter3]

And finally, you can dynamically populate your Collections like :

    var Book = Backbone.Collection.extend({
      model : Chapter,
      url: '/chapter'
      }
    });
    var book = new Book
    book.fetch();

Where this is simply a jquery-ajax call. The jquery-ajax alternative for the above will be :

$.ajax({
   url:"/chapter",
   type: "POST",
   dataType:"JSON",
   success:function(data){
       //save to a collection
   }
});

Hope this sample helped you. Ill be back with more tutorial on backbone.js

8 Comments on "What are Collections in Backbone.js?"


  1. When someone writes an post he/she retains the idea of a user
    in his/her mind that how a user can be aware of it. So that’s why this paragraph is amazing.
    Thanks!

    Reply

  2. I’m really loving the theme/design of your web site. Do you ever run into any browser
    compatibility issues? A number of my blog visitors have complained about my
    website not operating correctly in Explorer
    but looks great in Opera. Do you have any recommendations to help fix this issue?

    Reply

  3. Do you mind if I quote a couple of your posts as long as I provide
    credit and sources back to your weblog? My website is in the very same niche as yours and my
    users would genuinely benefit from some of the information you provide here.
    Please let me know if this alright with you. Regards!

    Reply

  4. Thanks for sharing your info. I really appreciate your efforts and
    I am waiting for your next post thanks once again.

    Reply

  5. Fantastic beat ! I wish to apprentice even as you amend your web site,
    how could i subscribe for a blog website? The account helped me a appropriate deal.

    I were a little bit acquainted of this your broadcast offered brilliant clear concept

    Reply

  6. Thanks for ones marvelous posting! I seriously
    enjoyed reading it, you are a great author. I
    will always bookmark your blog and will come back sometime soon. I want to encourage that you continue your
    great work, have a nice afternoon!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *