Passing an unsaved model to the controller

Question

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: unsaved models in dynamic URLs

yorbro yorbro · Accepted Answer · 2014-07-10T20:11:02

I think it's because your model hook in a Route that has a dynamic segment is not executed if you provide a context. In this case however, model returns a promise hash, whereas in your GroupsController you provide it with a Group model. So when you call model.group in your setupController, it gets the property group on your Group model. Hence it's not working. So instead of doing

this.transitionToRoute('members', group);

try

this.transitionToRoute('members', Ember.RSVP.hash({
  group: group,
  members: group.members
}));

Passing an unsaved model to the controller

1 Answers