backbone.js cache collections and refresh

Question

I have a collection that can 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

Answer 1

In my app, I addressed 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 the conditional statement checking for item existence, and using add() by default, rather than reset. Unlike simply passing {add: true} in the options argument, it allows you to retrieve sets of models that may overlap with what you already have loaded - using {add: true} will throw an error if you try to add the same model twice.

This should solve your caching problem, assuming your collection is set up so that you can pass some kind of page parameter in options to tell the server what page of options to send back. You'll probably want to add some sort of data structure within your collection to track which pages you've loaded, to avoid doing unnecessary requests, e.g.:

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;
                }
            })
        }
    }

});