Backbone.js Tutorial Part 13 – Backbone.js Views: Handling Collection Events

Backbone.js Tutorial Part 13 – Backbone.js Views: Handling Collection Events

This video is part of my 4-hour Udemy course where I take you on a step-by-step journey to learn Backbone.js from scratch to a level to start building real-world applications with it. Throughout the course, I’ll show you many real-world examples of popular websites such as Facebook, Twitter, Bitly, FourSquare, Pinterest, etc and explain how you would implement something like them with Backbone.

I’ll also give you cheat sheets and assignments to put what you learn in practice. You’ll also get the benefit of asking me any questions and I’ll help you out throughout your learning.

If you’re interested, you can get the course with a discount coupon here:

More free Backbone.js tutorials on my channel:

Backbone.js Models

Creating Models
Working with Model Attributes
Model Validation
Syncing Models with the Server

Backbone.js Collections

Creating Collections
Working with Collections
Fetching Collections from the Server

Backbone.js Views

Creating Views
Passing Data to Views
Handling the DOM Events
Handling the Model Events
Handling the Collection Events
Templating in Views

Take my full 4-hour Udemy course to also learn about:

Backbone.js Routers
Backbone.js Events
Testing Backbone.js Applications with Jasmine
Modularizing Bakcbone.js Applications with Require.js
Building an Application from Scratch with Backbone.js

Get the full course with 30% discount here:








2 responses to “Backbone.js Tutorial Part 13 – Backbone.js Views: Handling Collection Events”

  1. Justin Hathaway Avatar

    Instead of putting information in the DOM, you could just empty and re-render the entire list whenever something is removed(or added for that matter). Or, to avoid doing all of this, just make sure you determine which model is being removed and use that to properly .remove() the view.

  2. SangYoul KIm Avatar

    "onSongAdded" Method use again:

    var SongsView = Backbone.View.extend({
        tagName : 'ul',
        initialize : function(){
            this.model.on('add', this.onSongAdded, this);
            this.model.on('remove', this.onSongRemoved, this);
        onSongAdded : function(song){
            var songView = new SongView({model : song});
            this.$el.append( songView.render().$el );
        onSongRemoved : function(song){
        render : function(){
            this.model.each( this.onSongAdded ,this);

Leave a Reply

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