Attaching a Route to multiple Parents

Questions Routing
1

We encountered the following problem multiple times in our Ember app and are unsure about how to solve it. Imagine a modal dialog that should be reachable from multiple routes. It should have its own route and “/common-dialog” URL part attached to whatever whatever route it is opened from. When the dialog is closed the app should return to the parent route. For example when it is opened from the route ‘parent-route’ it should end up in ‘parent-route.common-dialog’ and upon closing return to ‘parent-route’ for multiple possible parent routes. Is there a possibility to implement this behavior without duplicating separate “common-dialog” subroutes for every possible parent route?

2

We’ve done something like this before using query params. Here’s some pseudo code…

In the application template you can have a conditional that renders a dynamic modal.

// app/controllers/application.js

Controller.extend({
  queryParams: [ 'modal' ],
  modal: null
});

{{! app/templates/application.hbs }}

{{#if modal}}
  {{component modal}}
{{/if}}

And then in any template where you want to open the modal you can link-to the current route with the query param.

{{link-to "Open modal" currentRoute
  (query-params modal="my-modal-component")}}

This should prevent you from having to make new sub routes every time you want to render a modal. Also, if you need to pass data into the modal you can add another query param.

3

Thank you @ryanto. We’ll try that out.