Passing an unsaved model to the controller

I have the following router:

router.js:

var Router = Ember.Router.extend({
  location: AppENV.locationType
});

Router.map(function() {
  this.resource('groups', { path: '/groups' }, function() {
    this.resource('members', { path: ':group'});
  });
});

export default Router;

This renders a sidebar at route /groups and at route /groups/<groupId> it displays the sidebar with the groups together with the members within the selected group. The main view of the application contains information about the selected group.

This works all fine so far. However I was having the idea that when creating a new group, I would like to display the unsaved group using the route /groups/new and display the details about that particular unsaved group within the main view of the app.

So, I have this route for the members:

/routes/members.js:

export default Ember.Route.extend({
  model: function (params) {
    return Ember.RSVP.hash({
      members: this.store.find('member', {group: params.group}),
      group: this.store.find('group', params.group)
    });
  },
  setupController: function(controller, model){
    this._super(controller,model);
    this.controllerFor('group').set("group", model.group);
  },
  renderTemplate: function(controller, model) {
    this.render('members',{
      outlet:'sidebar-members'
    });
    this.render('group', {controller: 'group'});
  }
});

This loads the member of the currently selected group and the selected group itself and renders two templates: the list of members sidebar and the main view containing the group template. Again, this works fine for already existing entries.

Now I found this stackoverflow [1] that describes that I should be able to make a newly created group available under the route /groups/new. So, I am adding a serialise function to the members route shown above:

  serialize: function(model, params) {
    if (model && model.get('isNew')) {
      // corresponds to path '/groups/:group'
      return { group: 'new'}
     }
    return this._super(model, params);
  },

I now can use the groups controller to create a new group and transition to that route:

controllers/groups.js:

export default Ember.ArrayController.extend({
  actions: {
    create: function() {
      var group = this.store.createRecord('group', {
        name: 'test'
      });
      this.transitionToRoute('members', group);
    },
  }
});

This works fine for the sidebar: A new group is added. The route /groups/new is shown in the browser. However that new group is not passed to the main view, which renders the group template. The group variable seems to be undefined within the template and within the group controller. I tried both without setting an id on the model and setting the id to ‘new’. Does not seem to change anything.

Is there a better way to do this or is there a particular error with how I am trying to do things?

[1] ember.js - Ember: unsaved models in dynamic URLs - Stack Overflow

Answer on stackoverflow ember.js - Passing an unsaved model to the controller - Stack Overflow