Ember deeply nested routes do not keep parent dynamic parameter

Question

I've got this ember application:

Ember       : 1.3.2
Ember Model : 0.0.11
Handlebars  : 1.3.0
jQuery      : 1.9.1

Using this resource map:

App.Router.map(function () {
  this.resource('dimensions', function() {
    this.resource('dimension', { path: ':dimension_id'}, function () {
      this.resource('value', { path: 'values/:value_id' });
    });
  });
});

And this allows me to embed {{outlet}} in "dimensions" template that fills with "dimension" template, and embed {{outlet}} in "dimension" template that fills with "value" template as well.

All works very well except for the link-to helper in the "value" template, that does not accept more params nor accepts other models as described in ember API documentation.

Which is the best way of dealing with link-to in deeply nested routes?

I've got this fiddle to show my problem: http://jsfiddle.net/vsiguero/pQpE3/5/

Thanks for your help!

nickiaconis · Answer 1 · 2015-11-19T21:42:12.797

You can access parent routes' parameters from a child route like so:

this.paramsFor(parent_route_name).param_name

So you'd do something like this in your /app/routes/dimensions/dimension/value.js file:

export default Ember.Route.extend({
  model: function(params, transition) {
    var dimension_id = this.paramsFor('dimension').dimension_id;
    // do whatever you need with dimension_id and params.value_id
  }
});

Here's a fork of your jsFiddle, modified and working: http://jsfiddle.net/niaconis/kxejh9yr/
Note that I updated Ember.

Here is the documentation for Route#paramsFor: http://emberjs.com/api/classes/Ember.Route.html#method_paramsFor

Andrew Hacking · Answer 2 · 2014-12-29T20:34:50.323

6

I believe the latest ember 1.5+ applies any models or literal values given to the link-to helper from child to parent so you don't have to provide models for the full model path as they will default to the current route path.

Also you have access to parent models via the transition argument passed into model() using transition.resolvedModels from memory. Each dynamic route segment in the route path will be an an attribute on that object so make sure your router DSL specifies distinct names for each segment parameter name (as you currently do). So in your ValueRoute you can do something like:

model: function(params,transition) {
    return transition.resolvedModels.dimension;
}

edited Dec 29 '14 at 20:34

answered May 18 '14 at 03:37

Andrew Hacking

6,296
31
37

In original question `link-to` is not working because Ember Routes are used improperly: instead of the current model, child models are loaded. But I needed this answer for other goals and found it here :) – snovity Dec 29 '14 at 13:45
This should use the public `Route#modelFor` API rather than the private API of the `transition` object. – nickiaconis Nov 19 '15 at 21:45

score 4 · Accepted Answer · edited Dec 12 '18 at 11:30

4

EDIT: The paramsFor method was added some time after I wrote this answer, which makes this possible. Refer to @nickiaconis' answer for more details.

If I understand you correctly, I think you're running into expected behavior. The parameters for a route are unique to that route. I'm not 100% sure why that is, but dynamic segment values don't get passed to child routes. What you should do instead is access the model directly. In your value route, you can use this.modelFor('dimension') to get the model that was resolved for the dimension route.

edited Dec 12 '18 at 11:30

Liam

27,717
28
128
190

answered Mar 13 '14 at 14:10

GJK

37,023
8
55
74

1

Yes, you're right, I ended up using this workaround here, I leave it here just in case is useful for anyone: http://jsfiddle.net/vsiguero/pQpE3/8/ – vsiguero Mar 14 '14 at 15:17

Ember deeply nested routes do not keep parent dynamic parameter

3 Answers3

Linked