Cannot link-to to route with nested dynamic segments

1

Hi team,

Ok I’m completely changing of route here (talking about routes LOL)…

I want to build a SPA for an online store, and my goal is to have friendly URLs such as /articles/electronics/audio/players

So far I got my routes like this:

this.route('articles', function(){
      this.route('ofCat1', {path: '/:cat_1'});
      this.route('ofCat2', {path: '/:cat_1/:cat_2'});
      this.route('ofCat3', {path: '/:cat_1/:cat_2/:cat_3'});
});

As you can see, my routes are not nested beyond the ‘articles’ route, that is because I want to display only one category at a time, if I were to nest them, they cat_1 would show at the same time than cat_2 and cat_3 when I visit the latter.

So I have my menu build via {{#each}}, something like this:

{{#each nav as |item|}}
    {{link-to 'articles.ofCat1' item.label}}
        {{#each item.subItems as |subItem|}}
            {{link-to 'articles.ofCat2' item.label subItem.label}}
                {{#each subItem.subItems as |subSubItem|}}
                    {{link-to 'articles.ofCat3' item.label subSubItem.label subSubItem.label}}
                {{/each}}
        {{/each}}
{{/each}}

This setup works fine on my development machine, Ubuntu + Chrome + Mouse… But it doesn’t work on iPad + Safari/Chrome/FireFox Touch, neither on Android + Native/Chrome/FireFox + Touch.

I wonder what is happening, Everything works fine on a PC, even one with a touch screen.

Any ideas? Thank you so much!

3

I’m unsure what you mean, the majority of Ember apps in existence rely on mobile browsers and this has not come up as an issue AFAIK. Feel free to add more details, such as the browsers/versions and perhaps a working example where you’ve isolated the issue.

4

Hello @jasonmit,

I updated my question, any ideas on how to solve the issue I’m facing?

Thanks!

5

You need to define what “doesn’t work” means. “It doesn’t work” is probably the most hated way to describe unwanted behaviour that you could ever state lol

6

That’s a point, as an Ember learner newbie if I entered www.yourweb.com/cat_1/cat_2/cat_3 , which route would it prioritise? The ofCat1 route could capture this and then attempt to transition to child routes cat_2/cat_3 and realise there are none on that rout and thus fail.

Or would it jump correctly to your third ofCat3 url pattern? If it does, what if the first route ofCat1 actually had child routes ofCat2 and a grandchild ofCat3, then what would it prioritise? Would it use the first route with a child cat_2 and grandchild cat_3 or would it just jump to route 3 with the explicit cat_1/cat_2/cat_3 url pattern. Or is this an ambiguity that leads to “undefined behaviour”? I’m not proposing a solution just wondering which one it is, the docs don’t really make it clear. Would be interested if any Ember experts could comment on it.