Polling a Collection with Backbone.js

Or just use the far simpler addition to backbone's fetch method:

this.fetch({ update: true });

When the model data returns from the server, the collection will be (efficiently) reset, unless you pass {update: true}, in which case it will use update to (intelligently) merge the fetched models. - Backbone Documentation

:-)

What you want to do is refresh the collection every few seconds and append the new comments. My suggestion is to deal with that problem on your backend. Send over the last timestamp from your last comment and ask the server for the delta from this date only.

To do so, in your collection:

CommentCollection = Backbone.Collection.extend({  url: function(){    return "/comments?from_time=" + this.last().get("created_at");  },  comparator: function(comment){    return comment.get("created_at");  }});

In your backend, query your database based on the from_time parameter.Your client code does not change to refresh the view.

If you do not want to change your backend code for any reason add this line in the addAll function:

addAll: function(){  $(this.el).empty();  this.collection.each(this.addOne);} 

Backbone.Collection.merge([options])

Building on @Jeb's response above, I've encapsulated this behavior into a Backbone extension that you can copy and paste into a .js file and include in your page (after including the Backbone library itself).

It provides a method called merge for Backbone.Collection objects. Rather than fully resetting the existing collection (as fetch does), it compares the server response to the existing collection and merges their differences.

1. It adds models that are in the response, but not in the existing collection.
2. It removes models that are in the existing collection, but not in the response.
3. Finally, it updates the attributes of models found in the existing collection AND in the response.

All expected events are triggered for adding, removing, and updating models.

The options hash takes success and error callbacks which will be passed (collection, response) as arguments, and it provides a third callback option called complete that is executed regardless of success or error (mostly helpful for polling scenarios).

It triggers events called "merge:success" and "merge:error".

Here is the extension:

// Backbone Collection Extensions// ---------------// Extend the Collection type with a "merge" method to update a collection // of models without doing a full reset.Backbone.Collection.prototype.merge = function(callbacks) {    // Make a new collection of the type of the parameter     // collection.    var me = this;    var newCollection = new me.constructor(me.models, me.options);    this.success = function() { };    this.error = function() { };    this.complete = function() { };    // Set up any callbacks that were provided    if(callbacks != undefined) {        if(callbacks.success != undefined) {            me.success = callbacks.success;        }        if(callbacks.error != undefined) {            me.error =  callbacks.error;        }        if(callbacks.complete != undefined) {            me.complete = callbacks.complete;        }    }    // Assign it the model and url of collection.    newCollection.url = me.url;    newCollection.model = me.model;    // Call fetch on the new collection.    return newCollection.fetch({        success: function(model, response) {            // Calc the deltas between the new and original collections.            var modelIds = me.getIdsOfModels(me.models);            var newModelIds = me.getIdsOfModels(newCollection.models);            // If an activity is found in the new collection that isn't in            // the existing one, then add it to the existing collection.            _(newCollection.models).each(function(activity) {                if (_.indexOf(modelIds, activity.id) == -1) {                     me.add(activity);                }            }, me);            // If an activity in the existing collection isn't found in the            // new one, remove it from the existing collection.            var modelsToBeRemoved = new Array();            _(me.models).each(function(activity) {                if (_.indexOf(newModelIds, activity.id) == -1) {                      modelsToBeRemoved.push(activity);                }            }, me);            if(modelsToBeRemoved.length > 0) {                for(var i in modelsToBeRemoved) {                    me.remove(modelsToBeRemoved[i]);                }            }            // If an activity in the existing collection is found in the            // new one, update the existing collection.            _(me.models).each(function(activity) {                if (_.indexOf(newModelIds, activity.id) != -1) {                     activity.set(newCollection.get(activity.id));                  }            }, me);            me.trigger("merge:success");            me.success(model, response);            me.complete();        },        error: function(model, response) {            me.trigger("merge:error");            me.error(model, response);            me.complete();        }    });};Backbone.Collection.prototype.getIdsOfModels = function(models) {        return _(models).map(function(model) { return model.id; });};

Simple Usage Scenario:

var MyCollection = Backbone.Collection.extend({  ...});var collection = new MyCollection();collection.merge();

Error Handling Usage Scenario:

var MyCollection = Backbone.Collection.extend({  ...});var collection = new MyCollection();var jqXHR = collection.merge({    success: function(model, response) {        console.log("Merge succeeded...");    },    error: function(model, response) {        console.log("Merge failed...");        handleError(response);    },    complete: function() {        console.log("Merge attempt complete...");    }});function handleError(jqXHR) {    console.log(jqXHR.statusText);    // Direct the user to the login page if the session expires    if(jqXHR.statusText == 'Unauthorized') {        window.location.href = "/login";                            }};