I think a good, clean approach (especially with complex modals) is to have a stateManager control when a modal is shown or hidden, and more precisely, when a modal is inserted or removed from the DOM.
My basic architecture for this in pseudocode is:
- create a modalStateManager object and an instance that is globally accessible
- put an outlet (e.g., {{outlet modal}} for the modal in your main template (i.e., the template where the user will click to open the modal)
- when user clicks to open modal, call an open function on your modalStateManager instance
- open function renders the modalView, modalTemplate and modalController into the modal outlet. (in old ember, you could do this with connectOutlets, I believe the new way is with renderTemplate)
you’d then also have some function that closes modal (and can destroy the modal).
I actually did a presentation on this topic at the Ember.js meetup: it’s old ember, but the architecture should still be valuable. https://speakerdeck.com/ashaegupta/managing-modals-and-other-non-url-based-views-in-ember-dot-js