Question

I’ve implementing a periodic autosave feature in my Ember app like this:

var App = Ember.Application.create({
    ready: function () {
        setInterval(function() { App.store.commit(); }, 10000);
    }
});

It works great, flushing all changes to the server periodically. But how I can hook into the event so that I can give a visual indication that it’s happening to the user?

I can’t just stick it in the ‘ready’ event handler, because most times App.store.commit() won’t actually have any work to do, and even if it did, it happens asynchronously – commit() returns immediately, before the requests are generated.

Answer 1

That’s true commit does not indicated its progress. Setup didCreate & didUpdate callbacks on your models to inject change notifications into your app.

The nature of the Ember-Data transaction model means that much can happen when a commit is requested, or not. Your callback notifications will probably need to be coalesced or throttled into a sensible user-facing message.

DIY Alternative: create an isSaving property & afterSave observer

On your controller, use computed properties & observes to watch your specific data model for the isSaving state:

// Example of a data model with a belongsTo association & nested hasMany
isSaving: function() {
  return this.get('isSaving') || (
    !Ember.empty(this.get('association')) && (
      this.get('association.isSaving') || 
        this.get('association.nestedAssociation').some(function(item) { return item.get('isSaving'); })
    )
  );
}.property("isSaving", "association.isSaving", "[e-mail]"),

afterSave: function() {
  if (this.get('isSaving')) return;
  // do something interesting
}.observes('isSaving')

This is a dirty compared to a generic, global isSaving or isInFlight state in ember-data, but it works very well in practice.