Use of multiple dynamic segments


#1

Setup: You have a site that shows information on automobiles across a set of worldwide regions.

If the user navigates to http://carsite.com/autos/cars/4-door/us, they see the following list of cars:

  • Ford Focus
  • GM Monte Carlo
  • Chrysler 300

If the user navigates to http://carsite.com/autos/cars/4-door/europe, the see the following list of cars:

  • Ford Focus
  • Fiat
  • Peuguot

The router defines these routes with dynamic segments (we are using Ember CLI),

this.resource('autos', function() {
    this.route('index', { path: ':auto_type/:num_of-doors/:region'});

On either page listed above, the name of each auto can be clicked to see the details for the auto listed. In the case of Ford Focus, it is listed under US and Europe.

If you are in the US listing, and you click the link for Ford Focus to navigate to its detail page, I want the URL to be http://carsite.com/autos/cars/4-door/us/ford-focus.

I use {{link-to }}s in my index template to link the item to its detail page.

In the case of Ford Focus, I don’t know how to tell {{link-to}} to go to http://carsite.com/autos/cars/4-door/us/ford-focus or http://carsite.com/autos/cars/4-door/europe/ford-focus?


#2

Thank to @bcardarella for a working answer provided over twitter, https://twitter.com/mikepmunroe/status/533284568120700928.

{{link-to ‘rout-name’ foo bar baz}}