EmberJs - Linking to multiple dynamic routes, multiple nested levels

Question

To link to record you can use something like this in your route:

  this.route('clients', function() {
      this.route('all',function(){
          this.route('view',{
              path:'view/:client_id'
          });
      });
  });

So if the user were to go to: /clients/all/view/-KdFmDwwWAHDFjjaG6aA

They could view that client record.

Is it possible to link at a deeper level? For example:

/clients/all/view/-KdFmDwwWAHDFjjaG6aA/property/-KdFeTqqUIKLFqbaP9aB

?

That way you could be looking at a specific client record and then launch an overlay for example to show the specifics on a single property that client has for sale?

I'm not sure how to structure the router or the link-to to accomplish this?

Answer 1

I hope I understand your question correctly. Here is my answer,

Yes, it's possible to have a deeper level, I will change your route config a bit to :

this.route('clients', { path: '/clients' }, function(){

    this.route('view', { path: '/:clients_id' }, function(){

      this.route('property', { path: '/property/:property_id' });
    });
  });

So in this case, your link-to code in the HBS would be

{{#link-to 'clients.view.property' clientId}}
  whatever
{{/link-to}}

and now file structure is :

clients/
|___index.hbs
|___view.hbs
|___view/
    |___propery.hbs

Please remember that you need to also modify your route.js for each properly. I assumed you don't have any problems for that.

if you need more help please let me know.