Multiple components under a single route

Questions
1

I have a route ‘RouteA’ with two components ‘dashboard1’ and ‘dashboard2’ as the two different components.

I have put this condition in the RouteA.hbs

{{#if clientName==‘somevalue’}} {{pathToDashboard1/dashboard1 }}

{{else}}

{{dashboard2 }}

{{/if}} {{outlet}}

Now my problem is that the application that I am working on had a single route to render both the components. Let us say the route path is ‘/path/clientName/routeA’

Now the problem is that whenever I switch between the client names from a dropdown, the actual route remains the same. In one case, when I switched between the client names, one of the dashboard component was rendered even before reaching the SetUpController in the route class.

Also, while the component was rendering the APIs that were being fired using RSVP.hash were still in pending status as examined in the chrome dev tools.

Only after the component rendered, the code went back to the SetUpController and only then the APIs were hit with a 200 OK. However, since the component had loaded before the data could be fetched, the component was rendered empty without the data.

I tried different options like refreshing the model, but I’m not sure why I’m facing this.

I’m very much new in EmberJS. Any help would be appreciated.

Thanks.

2

So to clarify…

Your route “RouteA” has a dynamic segment called “clientName” and that is what’s driving the different dashboard component rendering? And how is “clientName” passed to the route template? In setupController? And what does your model hook look like (if you have one)?