Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember deeply nested routes do not keep parent dynamic parameter

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!

like image 358
vsiguero Avatar asked Mar 13 '14 11:03

vsiguero


3 Answers

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;
}
like image 157
Andrew Hacking Avatar answered Sep 24 '22 23:09

Andrew Hacking


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

like image 44
nickiaconis Avatar answered Sep 23 '22 23:09

nickiaconis


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.

like image 44
GJK Avatar answered Sep 22 '22 23:09

GJK