Ember - clear form after submitting

Question

I created very simple Ember app, using Ember Data. There is one form where the user creates the entity and submits. It's in BandsNewView (created automatically by Ember), controlled by BandsNewController:

App.BandsNewController = Ember.Controller.extend({
    cancel: function() {
        this.transitionTo('bands');
    },

    save: function() {
        App.Band.createRecord(this);
        this.get('store').commit();

        this.set('name');
        this.set('description');
        this.transitionTo('bands');
    }
});

I wonder whether there is simplier solution to "clean up" (i.e empty) the form after saving new Band entity? Can I say something like this.set(), which would empty all the fields? Or is my approach essentially wrong and should I do it completely differently?

score 2 · Accepted Answer · edited Nov 10 '13 at 23:03

The pattern that I've been enjoying is creating and destroying the object on enter and exit of the route itself.

App.BandsNewRoute = Ember.Route.extend({
  model: function(params) {
    return App.Band.createRecord({});
  },
  save: function() {
    this.get('currentModel.store').commit();
    return this.transitionTo('bands');
  },
  exit: function() {
    var model = this.get('currentModel');
    if (model.get("isNew") && !model.get("isSaving")) {
      return model.get('transaction').rollback();
    }
  }
});

As you can see, it makes the exit function a little more complex, but it will be exactly the same for every object creation route, so you can factor it out. Now your templates can just bind straight to the model's properties and the model will be saved on save, or rolled back on exit (which will clear the form)

If you are planning on possibly changing other data models and not saving them, or have unsaved models, a way to safely clear the model away is to put it in it's own transaction. I only tend to use this though for objects that are not the main focus of my current flow.

App.BandsNewRoute = Ember.Route.extend({
  model: function(params) {
    var transaction = this.get('store').transaction();
    return transaction.createRecord(App.Band, {})
  }
});

Everything else can stay the same.

This can also rollback other changes which may be present. You may need to put the record in separate transaction.. See my edit.. — Shimon Rachlenko, Feb 10 '13 at 13:14
Shimon, your way of doing the transaction was a bit verbose, updating with a shorter one. — Andre Malan, Feb 10 '13 at 14:40
@AndreMalan it's worth updating this to use 'deactivate' and remove the transactions code. I thought it was better to comment than to completely rewrite it for you. — jonathanKingston, Jun 01 '15 at 17:30

Ember - clear form after submitting

1 Answers1

Linked