Transition to a route after successful save without deleting record

Question

Ember-1.0.0 and Ember Data 1.0 Beta 2 with Fixture Adapter.

What I'm trying to accomplish is that after I call save I'd like to transition to a route if the returned promise is resolved.

In this jsbin you can click 'New', type in someting then click 'Create'. The transition occurs, therefore the promise from save is resolved, but then the new model we created gets deleted due to the deactivate hook.

As an aside, having the chrome ember inspector open on the data window is probably helpful.

My implementation is obviously wrong though. How should I go about saving a record, then wait for the promise to resolve before transitioning to a route without deleting the new created record?

Here is the save action:

save: function() {
  var self = this;
  self.modelFor('thingsNew').save().then(function() {
    self.transitionTo('things');
  });
}

And the deactivate hook:

deactivate: function() {
  var model = this.modelFor('thingsNew');
  if(!model.get('isSaving')) {
    model.deleteRecord();
  }
}

See the jsbin for everything else.

The reason for deactivate is so that the model in thingsNew gets properly deleted when the user clicks on another link or presses the back button before clicking the create button. For example lets say the user clicks New then Home. The model would still be around. If the user clicks New again, a new model is created. Now we have two new models. If the user clicks Home then New yet again, now we have three models. If a valid input is entered and the user finally clicks on Create, have one new saved model and two new unsaved models still floating around. I don't think there's even a way to access those floating models anymore.

Finally, if I just call the two methods then the model will call save then transition without deleting the model, but it will do so regardless whether the promise is resolved or rejected.

model.save();
model.transitionTo('things');

Just to note this also seems to happen with RESTAdapter. The record is successfully created on the server, but the model still gets deleted in the Ember app during the transition.

cyclomarc cyclomarc · Accepted Answer · 2013-09-08T18:00:18

I now understand better why you want to delete at "deactivate". I always learned that it is better not to use deactivate (will not fire when switching between for example xxx/edit/1 and xxx/edit/2).

You can better use willTransition. Here is the code I use:

App.AuthorsNewRoute = Ember.Route.extend({
  model: function() {
    return this.store.createRecord('author');
  },

  actions: {
    willTransition: function(transition) {
      var model = this.get('currentModel');
      if (model && model.get('isDirty')) {
        if (confirm("You have unsaved changes. Click OK to stay on the current page. Click cancel to discard these changes and move to the requested page.")) {
          //Stay on same page and continue editing
          transition.abort();
        } else {
          //Delete created record
          var author = this.get('currentModel');
          author.deleteRecord();
        }
      } 
    }
  }
});

Transition to a route after successful save without deleting record

2 Answers