Right way to design a dropdown for child route / dynamic segment

1

Let’s say I have this basic route

this.route('projects', function() {
   this.route('project', {
       path: ':project_id'
   });
});

In my projects route, I fetch all available projects from my API backend. And in the template for that route, I have a dropdown where you can select a project. Once selected, the route transitions to the projects.project route where the particular project’s data is displayed. From this route, the user can select another project from the dropdown to view without having to go back a page.

My question is, let’s say the user goes directly to /projects/my-random-project. When the page loads, I want my dropdown to have my-random-project selected. But how would the projects route know of the dynamic segment of a child route?

Or put it another way, what’s the best way to have a persistent dropdown that maps to a particular route’s dynamic segment.

1 Like