Backbone.js: Adding just the new models from JSON collection fetch

Question

I have a webapp based on Backbone.js with a list. The entries of the list are coming from a REST API. This list (JSON array) updates from time to time. I want to update my list in the frontend too, without reloading the page.

I thought about using a poller to update the file list with every new object returned by the API. However, the poller is not the problem here, I first need a function to add just the new models to the file list.

The API returns a JSON list, based on this model:

Xff = Backbone.Model.extend({
        defaults: {
                id: null,
                name: "",
                language: "en",
                timestamp: 0,
                status: null,
                progress: 10,
                duration: 0
        }
});

This is the collection. restUri points to the REST API and with /files it gets the complete file list.

XffCollection = Backbone.Collection.extend({
        model: Xff,
        comparator: function(a, b) {
             return (a.get("timestamp") > b.get("timestamp") ? -1 : 1);
        },
        url: restUri + "files"
});

This is the AppView object. It uses the XffCollection, as explained above.

app = new AppView({
        collection: new XffCollection()
});

AppView is a regular backbone view...

AppView = Backbone.View.extend({ .... })

Using app.collection.fetch() I can fire the request (visible in firebug), but the list is not updated. I also have a addAll() function, but then it just appends the new file list to the old file list.

The addAll:

addAll: function() {
  this.collection.chain().sort().each(this.addOne, this);
}

This is the addOne:

addOne: function(xff) {
  var v = new XffView({model: xff});
  this.xffViews.push(v);
  $("#xffs").append(v.render().el);
}

How can I add just the new entries to the list?

UPDATE

While kindasimples anwser works now, the filelist in the frontend is not sorted anymore using the comparator defined in the collection (with the timestamp). Using addAll() in the bottom of the comparator, the list is sorted.

To provide additional information, here are more parts of the overall backbone code: http://pastebin.com/rR39x3Y1

From the backbone.js docs:

collection.sort([options]) Force a collection to re-sort itself. You don't need to call this under normal circumstances, as a collection with a comparator will sort itself whenever a model is added. To disable sorting when adding a model, pass {sort: false} to add. Calling sort triggers a "sort" event on the collection.

But it does not sort itself. Also calling app.collection.sort() right after the fetch does not help.

UPDATE 2

I fixed it by sorting the array in the API before returning it. That's not how it was meant to be but at least it works now.

kindasimple kindasimple · Accepted Answer · 2015-01-21T00:45:01

You have the right idea. addOne() will render individual items when you do your initial setup after a fetch to populate items. You can add a listener to the collection events to add the new items. Collection.Fetch does what you want by adding new models to the collection and leaving the old in tact (as long as you don't pass the {reset:true} flag as a parameter)

So, on your view add the listener to the initialize hook

initialize: function() {
    this.listenTo(this.collection, "add", this.addOne)
}

You will probably want to define the idAttribute on your Xff Model so that backbone can identify new items properly.

Backbone.js: Adding just the new models from JSON collection fetch

1 Answers