How to access a parent model within a nested index route using ember.js?

Question

I have the following route structure

App.Router.map(function(match) {
    this.route("days", { path: "/" });
    this.resource("day", { path: "/:day_id" }, function() {
        this.resource("appointment", { path: "/appointment" }, function() {
            this.route("edit", { path: "/edit" });
        });
    });
});

When I'm inside the AppointmentIndexRoute I'm looking for a way to create a new model using some meta day from the day (parent) model but because the day model does not yet know about this appointment I'm unsure how to associate them until the appointment is created / and the commit is fired off.

Any help would be much appreciated

score 43 · Accepted Answer · edited May 23 '17 at 12:34

43

From within the AppointmentIndexRoute's model hook you can use modelFor('day') to access the parent model. For example:

App.AppointmentIndexRoute = Ember.Route.extend({
  model: function(params) {
    day = this.modelFor("day");
    ...
  }
});

Another example is here: emberjs 1.0.0pre4 how do you pass a context object to a resource "...Index" route?

edited May 23 '17 at 12:34

Community

1
1

answered Feb 05 '13 at 14:03

Mike Grassotti

19,040
3
59
57

I love it when it's that simple -thanks for the blazing fast reply! – Toran Billups Feb 05 '13 at 14:31
10

note that now (Ember 2.0) you need to use the full path of the route, so it would be `this.modelFor('days.day')` – andorov Nov 03 '15 at 15:29
@andorov Am I missing something? It doesn't look like day route is nested under days. They're siblings. – LukeP Apr 12 '16 at 22:17
yup, you're right. however i believe pre-2.0 would let you get away with non-absolute modelFor calls – andorov Apr 14 '16 at 16:53

Emad · Answer 2 · 2014-09-09T19:33:06.477

What if I am not using ember data? How do I get the parent id in a route like

  this.resource('workspace',function () {
    this.resource('workflow', {path: '/:workspace_id/workflow'}, function () {
      this.route('show', {path: '/:workflow_id'});
    });
  });

This code will not work:

App.WorkflowShowRoute = Em.Route.extend({
  model: function(params) {
      var ws  = this.modelFor('workspace');  //ws is undefined
      return this.store.find('workflow', params.id, ws.id);
  }
});

EDIT: I found a workaround, it's not ideal but works exactly the way I want it.

  this.resource('workspace',function () {
    this.route('new');
    this.route('show', {path: '/:workspace_id'});
    //workflow routes
    this.resource('workflow', {path: '/'}, function () {
      this.route('new', {path:'/:workspace_id/workflow/new'});
      this.route('show', {path: '/:workspace_id/workflow/:workflow_id'});
    });
  });

And in my workflow route, I can access the workspace_id jus as I expect from the params property:

App.WorkflowShowRoute = Em.Route.extend({
  model: function(params) {
      return this.store.find('workflow', params.workflow_id, params.workspace_id);
  }
});

Finally, here is my link-to inside the workspace.show route helper:

{{#each workflow in workflows}}
  <li>
    {{#link-to 'workflow.show' this.id workflow.id}}{{workflow.name}}{{/link-to}}
  </li>
{{/each}}

where are you storing your data (if you are not using the ember-data store)? do you have a home grown identity map or something equivalent ? — Toran Billups, Sep 09 '14 at 15:56
I created my own store using the technique expalined here http://eviltrout.com/2013/03/23/ember-without-data.html — Emad, Sep 09 '14 at 19:28

How to access a parent model within a nested index route using ember.js?

2 Answers2