Ember pattern for 'new' routes

Question

I have a form where visitors can leave a comment with a typical "I accept the ToS" checkbox and link. The link transitions to a new route with the ToS text.

I create my comment record when the route with the form is loaded. I do this so my template can load the right default settings (there is a gender radio button for example that is set to the right value thanks to Ember data attrs).

App.CommentRoute = Ember.Route.extend({
  model: function() {
    return this.store.createRecord('comment');
  }
  actions: {
    create: function(comment) {
      comment.save();
    }
  }
});

The comment model:

App.Comment = DS.Model.extend({
  body: DS.attr("string"),
  gender: DS.attr("string", {defaultValue: "M"}),
});

And the template:

<form {{action "create" this on="submit"}}>
  ...
</form>

Now, when people click the back button from the ToS page all the form fields are emptied as a new model is loaded. I do want this behavior once the form is saved or if you reload it but obviously not when using the back button. I worked around this by keeping a global state but feel there should be a better way. Any tips?

Answer 1

There are numerous ways to go about this, so I expect a few other answers. I personally wouldn't start out the route with a new record...

I generally reserve that naming convention (Comment) for a route that GETs a particular model id... Ideally, this would all be on a route called App.CommentNewRoute. But yeah, whatever works for you.

Here's one way you might do it:

App.CommentRoute = Ember.Route.extend({
  model: function() {
    if(Ember.isEmpty(this.modelFor('comment'))){
      return this.store.createRecord('comment');
    } else {
      return this.modelFor('comment');
    }
  }
  actions: {
    create: function(comment) {
      comment.save();
      this.set('model', this.store.createRecord('comment'));
    }
  }
});

Feels a little clunky, but that should move you along with your current approach. You basically are checking to see if a model exists. If it does, you just return that model as it may have changed.

When you create a comment, it will save and then reset the model with a new record.

Good luck!

Answer 2

Whenever I have some kind of 'form' route (new, editing, etc) I use the following naming convention: App.CommentsNewRoute and App.CommentEditRoute. This gives you the benefit of being able to break apart the route name and have properties on the controller to show and hide various input depending on whether the user is editing or creating something.

As for the routes...

New route (comments/new):

App.CommentsNewRoute = Em.Route.extend({

  actions: {
    willTransition: function(transition) {
      var model = this.get('controller.content');

      if (model.get('isDirty')) {
        model.deleteRecord();
      }
    }
  },

  model: function() {
    return this.store.createRecord('comment');
  },

});

Edit route (comment/:comment_id/edit):

App.CommentEditRoute = Em.Route.extend({

  actions: {
    willTransition: function(transition) {
      var model = this.get('controller.content');

      if (model.get('isDirty')) {
        model.rollback();
      }
    }
  },

});

Router:

App.Router.map(function() {
  this.resource('comments', function() {
    this.route('new');

    this.resource('comment', { path: '/:comment_id' }, function() {
      this.route('show', { path: '/' });
      this.route('edit');
    });
  });
});

Every controller and form view has a mixin that handles submission, cancel, destroy, validations, and server error events, plus has some computed properties (e.g. editing: true, new: false).

Answer 3

I see a problem with saving (or creating or deleting) models in willtransition method or in a controller action method: the saving is asynchronous and we cannot manage asynchronisity (error and loading states) naturally by ember. So imho, this kind of operations should pass though boforeModel/model/afterModel hooks. I suggest:

App.CommentsNewRoute = Em.Route.extend({
    actions: {
        clickSaveButton: function(transition) {
            var model = this.controller.get('model');
            if (model.get('isDirty') && !model.get('isEmpty')) {
                this.refresh(); // to call model hook
            }
        }
    },

    model: function() {
        if(this.controller){
            var model = this.controller.get('model');
            if(model && model.get('isDirty')){
                return this.model.save();// return promise as it shold be
            }
        }

        return this.store.createRecord('comment');
    },
});

similar for deleting and editing records