The same Ember.JS template for displaying / editing and creating

Question

I am writing a CRUD application using Ember.JS:

• A list of "actions" is displayed;
• The user can click on one action to display it or click on the button to create a new action.

I would like to use the same template to display / edit an existing model object and create a new one.

Here is the router code that I use.

App = Ember.Application.create(); App.Router.map(function() { this.resource('actions', {path: "/actions"}, function() { this.resource('action', {path: '/:action_id'}); this.route('new', {path: "/new"}); }); }); App.IndexRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('actions'); } }); App.ActionsIndexRoute = Ember.Route.extend({ model: function () { return App.Action.find(); } }); App.ActionRoute = Ember.Route.extend({ events: { submitSave: function () { this.get("store").commit(); } } }); App.ActionsNewRoute = Ember.Route.extend({ renderTemplate: function () { this.render('action'); }, model: function() { var action = this.get('store').createRecord(App.Action); return action; }, events: { submitSave: function () { this.get("store").commit(); } } }); 

The problem is that when I first show the action and then return to creating a new one, it seems that the template does not use the newly created record, but uses the previous one instead.

My interpretation is that the controller and the template are not synchronized. How would you do that? Maybe there is an easier way to achieve this?

Here is the JSBin with the code: http://jsbin.com/owiwak/10/edit

Answer 1

Speaking this.render('action') , you do not just tell him that you are using the action template, but also the ActionController if you really need an action template, but with an ActionNewController .

You need to override this:

 this.render('action', { controller: 'actions.new' }); 

Updated by JS Bin .