Same Ember.JS template for display/edit and creation

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 a button to create a new action.

I would like to use the same template for displaying/editing an existing model object and creating a new one.

Here is the router code 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 display an action, and then come back to create a new one, it looks like the template is not using the newly created record, but use instead the one displayed previously.

My interpretation is that the controller and the template are not in sync. How would you do that? Maybe there is a simpler way to achieve this?

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

Answer 1

By saying this.render('action'), you are not just telling it to use the action template, but also the ActionController, when in fact you want the action template, but with the ActionNewController.

You need to override that:

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

Updated JS Bin.