Question

I have a Backbone Collection of Models that have different data coming in on page load than when it’s fetched.

For example, the attributes coming in on page load are:

[{ name: 'cat', color: 'yellow' },
 { name: 'dog', color: 'brown' },
 { name: 'fish', color: 'orange' }]

Then, on fetch() (or otherwise updated from the server while the page lives, the data looks like:

[{ name: 'cat', current: 5, total: 100 },
 { name: 'dog', current: 6, total: 50 },
 { name: 'fish', current:7, total: 25 }]

How can I update the Backbone Collection with the new data while retaining the old data? IDs are not assigned from the server (name is guaranteed unique).

Answer 1

I ended up going with this. This will update the properties for models that exist while also removing models that did not come in and adding new ones.

Backbone.Collection.prototype.update = function(col_in){  
  var self = this,
      new_models = [];

  _(col_in).each(function(mod_in) {
    var new_model = self._prepareModel(mod_in),
        mod = self.get(new_model.id);
    if (mod) { 
      new_models.push(mod.set(mod_in, {silent:true}));
    } else { 
      new_models.push(mod_in);
    }
  });

  this.reset(new_models);
};

Note the use of _prepareModel this is important so that the Models can be identified via whatever “id” property is used in the Backbone Model object.