Caching Backbone.js Models

‹prev | My Chain | next›

Mostly satisfied with my solution for filtering Backbone.js collections, I set out tonight to begin exploring caching. With filtering in place, only the appointments for October are retrieved from the server when displaying the month view for October:

Clicking "next" redraws the calendar, fetches the November appointments from the server and draws them on the calendar:

Now, if the user clicks on "previous", the calendar redraws and re-fetches the October appointment collection from the server. There is no need for this round-trip—the browser just had the October appointments. So let's see if I can cache appointments.

Since I am already overriding the collection's fetch() method (to retrieve per-month slices), this seems like a good place to start. Backbone collections reset by default when fetching. To add to the existing collection, I need to set the add option to true:

        var Appointments = Backbone.Collection.extend({
          // ...
          fetch: function(options) {
            options || (options = {});

            // only fetch appointments from this month
            var data = (options.data || {});
            options.data = {date: this.date};

            // Add fetched appointments to the existing list (don't reset)
            options.add = true;

            return Backbone.Collection.prototype.fetch.call(this, options);
          },
          // ...
        });

That is not quite the end of the story. If I load October, then navigate to November and back to October, Backbone will fetch October, then November and then October again:

My first attempt at caching will store an internal cache attribute. Every time a month is fetched, I stored it in the cache. If the month is already cached, I short-circuit the fetch() entirely:

        var Appointments = Backbone.Collection.extend({
          // ...
          cached: {},
          // ...
          fetch: function(options) {
            options || (options = {});

            if (this.cached[this.date]) {
              if (options.success) options.success(this, "");
              return;
            }

            this.cached[this.date] = true;

            // only fetch appointments from this month
            var data = (options.data || {});
            options.data = {date: this.date};

            // Add fetched appointments to the existing list (don't reset)
            options.add = true;

            return Backbone.Collection.prototype.fetch.call(this, options);
          },
          // ...
        });

And that works! To a point...

Indeed, previously fetched months are not re-requested from the server. The problem is that appointments are no longer drawn on the calendar:

I cannot quite figure out what is missing at here. Do I need to trigger model events? Collection events? I try a few, but am unable to get the magic combination to get the appointments to redraw. I will pick back up here tomorrow.
Update: I get this somewhat solved by triggering "change" events for models in the current month and "destroy" event for other models:

// ...
          fetch: function(options) {
            options || (options = {});

            if (this.cached[this.date]) {
              var date = this.date;
              _.each(this.models, function(m) {
                if (!m.get("startDate")) return;
                if (m.get("startDate").indexOf(date) > -1) {
                  m.trigger('change', m, this, options);
                }
                else {
                  m.trigger('destroy', m, this, options);
                }
              });
              return;
            }

            this.cached[this.date] = true;

            // only fetch appointments from this month
            var data = (options.data || {});
            options.data = {date: this.date};

            // Add fetched appointments to the existing list (don't reset)
            options.add = true;

            return Backbone.Collection.prototype.fetch.call(this, options);
          },
// ...

I have change and destroy handlers already bound in my Appointment views, which is why this works. However, because I am explicitly triggering events for which my application already listens, this is not a general purpose solution. I am also seeing some wonkiness when repeatedly moving backwards and forwards (I seem to lose one model each time). Ah well, this is a start. I will try to see the tale through to an end tomorrow.


Day #170