Implementing Offline Caching

To support offline caching, Mobile Sync requires you to supply your own implementations of a few tasks:

• Tracking offline status and specifying the appropriate cache control flag for CRUD operations, as shown in the app.models.Account example.

• Collecting records that were edited locally and saving their changes to the server when the device is back online. The following example uses a SmartStore cache query to retrieve locally changed records, then calls the SyncPage function to render the results in HTML.

  1sync: function() {
  2	var that = this;
  3	var localAccounts = new app.models.AccountCollection();
  4	localAccounts.fetch({
  5		config: {type:"cache", cacheQuery: {queryType:"exact", 
  6       indexPath:"__local__", matchKey:true}},
  7		success: function(data) {
  8			that.slidePage(new app.views.SyncPage({model: data}).render());
  9		}
  10	});
  11}
  12
  13app.views.SyncPage = Backbone.View.extend({
  14
  15    template: _.template($("#sync-page").html()),
  16
  17    render: function(eventName) {
  18        $(this.el).html(this.template(_.extend(
  19            {countLocallyModified: this.model.length}, 
  20            this.model.toJSON())));
  21        this.listView = new app.views.AccountListView(
  22            {el: $("ul",  this.el), model: this.model});
  23        this.listView.render();
  24        return this;
  25    },
  26...
  27});