How do I keep my ember-data model from being modified and then reloaded

Question

I'm getting this error:

Attempted to handle event loadedData on while in state rootState.loaded.updated.uncommitted.

My controller is really simple:

App.JudgeController = Ember.ObjectController.extend({
    isEditing: false,

    edit: function() { this.set('isEditing', true); },
    done: function() { this.get("store").commit(); this.set('isEditing', false); }    
});

I have a form hooked up, here's a simplified version:

<button class="btn btn-link" {{action 'edit'}} {{bindAttr disabled='isEditing'}}>Edit</button>
{{#if isEditing}}
    {{view Ember.TextField placeholder="First Name" valueBinding="firstname"}}
    <button type="button" class="btn btn-primary" {{action 'done'}}>Done</button>
{{#if isEditing}}

I have a navbar at the top. So the user can click the navbar and leave the page while they're editing, without clicking the Done button. Then if they go back to that page, they get that error that I mentioned at the beginning.

What do I do about this? I have a bunch of forms, and they all have a similar issue. Is there a best practice?

Maybe there a way to have a method on my controller called when the user navigates away? Then I could either rollback, or display a warning to the user and/or keep them from leaving.

Edit: I'm currently using RC5 of Ember.js. But I'm not opposed to upgrading it. I'm not really in love with the willTransition solution (maybe because it's in the router, whereas right now all my logic is in the controller, and it feels a bit messy). I guess I'll see what other answers I get before I upgrade.

intuitivepixel intuitivepixel · Accepted Answer · 2013-07-06T23:03:56

Maybe there a way to have a method on my controller called when the user navigates away? Then I could either rollback, or display a warning to the user and/or keep them from leaving.

Very good assumption! Indeed exactly what you mention can be done.

I don't know which ember.js version you are using, but assuming you use rc6 you should definitely check out on of the latest addition router facelift. See also here for the official release blog post. In your case especially the willTransition hook seam to be relevant, because all transitions types (URL changes and transitionTo) will fire a willTransition event on the currently active routes. This gives active routes a chance to conditionally prevent a transition to take place. One example is preventing navigation when you're on a form that's half-filled out:

App.FormRoute = Ember.Route.extend({
  events: {
    willTransition: function(transition) {
      if (!this.controller.get('formEmpty')) {
        transition.abort();
        // now you can do the rollback on your models
        // and with transition.retry() you can redirect the user 
      }
    }
  }
});

So basically in your case you would do a rollback on your models if the user tries to navigate away, and then redirect the user after you are done.

Hope it helps.

How do I keep my ember-data model from being modified and then reloaded

1 Answers