Best Practice for Edit Forms

I’m beginning to implement some forms into my application and am wondering if there is a best practice for edit forms… My app has a split view with a list of items on the left and an outlet on the right that shows details for the selected item. I want to have an edit button that changes the detail view to an edit view. My current plan is to use partials and an isEditing flag in the controller to control which partial gets rendered.

My primary template would be something like

{{#if isEditing}}
   {{partial 'my-edit-template'}}
{{else}}
   {{partial 'my-view-template'}}
{{/if}}

This feels better to me that having a bunch of {{#if isEditing}} spread throughout a single template.

Is this considered the Ember Way™ of doing things or is there a better way?

1 Like

Ember Way™ (I recon) would be to have another route:

this.resource('item', {
    path: '/items/:item_id',
}, function () {
    this.route('edit');
});

This will give you two URLs:

  • /item/4 — item overview
  • /item/4/edit — item edit

You will be able to have separate templates (views):

  • item.hbs — outlet
  • item/index.hbs — item overview
  • item/edit.hbs — item edit
6 Likes