Backbone.js cache collections and update

Question

I have a collection that could potentially contain thousands of models. I have a view that displays a table with 50 rows for each page.

Now I want to be able to cache my data, so when the user loads page 1 of the table and then clicks on page 2, the data for page 1 (lines # 01-50) will be cached so that when the user clicks on page 1 again. the spine will not need to load it again.

In addition, I want my collection to be able to update updated data from the server without performing a RESET, as RESET will delete all models in the collection, including links to an existing model that may exist in my application. Can I retrieve data from the server and update or add new models, if necessary, by comparing existing data and new arriving data?

Answer 1

In my application, I turned to the reset question by adding a new method called fetchNew :

 app.Collection = Backbone.Collection.extend({ // fetch list without overwriting existing objects (copied from fetch()) fetchNew: function(options) { options = options || {}; var collection = this, success = options.success; options.success = function(resp, status, xhr) { _(collection.parse(resp, xhr)).each(function(item) { // added this conditional block if (!collection.get(item.id)) { collection.add(item, {silent:true}); } }); if (!options.silent) { collection.trigger('reset', collection, options); } if (success) success(collection, resp); }; return (this.sync || Backbone.sync).call(this, 'read', this, options); } }); 

This is pretty much identical to the standard fetch() method, except for checking the conditional operator for the existence of the element and using add() by default rather than reset . Unlike simply skipping {add: true} in the options argument, it allows you to retrieve sets of models that may overlap with what you have already loaded - using {add: true} an error is generated if you try to add the same thing twice model.

This should solve your caching problem, assuming your collection is configured so that you can pass some page parameter to options to tell the server which parameter page to send back. You will probably want to add some kind of data structure to your collection to keep track of which pages you loaded to avoid unnecessary queries, for example:

 app.BigCollection = app.Collection.extend({ initialize: function() { this.loadedPages = {}; }, loadPage: function(pageNumber) { if (!this.loadedPages[pageNumber]) { this.fetchNew({ page: pageNumber, success: function(collection) { collection.loadedPages[pageNumber] = true; } }) } } }); 

Answer 2

Backbone.Collection.fetch has the {add: true} option, which will add models to the collection instead of replacing the content.

 myCollection.fetch({add:true}) 

So, in your first scenario, the elements from page2 will be added to the collection.

As for your second scenario, there is currently no built-in way to do this.

According to Jeremy , there is something that you should do in your application, and not as part of Backbone.

The backbone has a number of problems when used for shared applications, where another user can update the models that you have on the client side. I get the feeling that Jeremy seems to be focusing on single-player apps, and the ticket discussion above illustrates this.

In your case, the easiest way to handle the second scenario is to iterate over your collection and call fetch() for each model. But this is not very good for performance.

For a better way to do this, I think you'll have to redefine collection._add and go down the dalyons line for this pull request .

Answer 3

I managed to get update in Backbone 0.9.9 kernel. Check this out for exactly what you need http://backbonejs.org/#Collection-update .