Introduction to Backbone.js Part 4: Collections – Video Tutorial

Backbone.js Collections Video TutorialPart 4: Backbone.js Collections Video Tutorial is here now. We've already discussed models, views, and routers in Backbone.js so far, but now we're on to collections. Collections are pretty much exactly what their name implies: collections of models. Many times, data is displayed in lists, not just singular items. This is where collections come in - to keep every model in order and synchronized with the database on the back end.

Backbone.js Video Tutorial Series

Some JavaScript Code

var Person = Backbone.Model.extend({
	initialize: function() {
		console.log('Person is initialized.');
	},
	defaults: {
		name: 'undefined',
		age: 'undefined'
	}
});

var People = Backbone.Collection.extend({
	initialize: function() {
		console.log("People Collection is initialized");
	},
	model: Person
});

var person = new Person({name:"Joe"});

var people = new People(person);
people.add([{name:"Bob"}, {name:"Jim"}]);

console.log(people.toJSON());

Concluding Backbone.js Collections

That wraps up Collections. On Monday, April 16th, the 5th and "final" part of this series -- AJAX -- will be available. After that we'll resume other posts for a week or two before moving on to creating video tutorials to create a full app using Backbone.js. Got any ideas you want to see built? Let me know in the comments below. Also, make sure to share this with all of your friends and followers so we can get their ideas for an app. Happy Coding!

Backbone.js Video Tutorial Series

About the Author

Author: Joe Zim

Joe Zim

Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.


  • Anonymous Guest

    Yea, i have some idea, let’s build a something like a ‘startup’ xD):

    • http://www.joezimjs.com Joe Zimmerman

       that might be interesting. Then I’d have about 5 months of material to show everybody as they steal my startup idea and make millions. This definitely sounds like a good idea.

  • Anon

    Thanks, it’s Monday now, and I’m waiting for the AJAX part :D

    • http://www.joezimjs.com Joe Zimmerman

      It was only 8PM on Sunday here when you posted that. Plus my posts generally get released around 5AM in my time, though I’ll probably release this one earlier.

  • http://profiles.google.com/amit.2006.it Amit Gharat

    I’m still confused about collection. Where does a collection come into play when it comes to writing a single-page app?

    • http://www.joezimjs.com Joe Zimmerman

       Any time you have a list, such as a list of tasks to do or a list of tweets from Twitter, each to-do task and tweet will be in its own model, and the collection will hold all of those models together in one object so it’s easier to manage and synchronize with your backend.

  • Mike

    Thanks for the tutorials. If you’re still looking for suggestions on what to build, how about an everything bucket app, something for storing text-based notes, urls bookmarks, bits and snatches of different data types.

    • http://www.joezimjs.com Joe Zimmerman

       That might not be a bad idea.

  • http://twitter.com/kishanthobhani Kishan Thobhani

    This is the best backbone tut i have found so far, clear and concise. I am building a phonegap app using backbone. kudos to you sir.

  • Aanya

    Very helpful video-tutorial.