I am in the process of adding ember to the datafruits.fm frontend site. All of the links at the top are bootstrap modals, and I’d like to be able to send links to these pages to people, so using ember with routes seemed like a good solution.
I wanted the route to change when opening the modal, and the router to return to the root path when closing the modal.
At the time of this writing, Ember provides a lot of route hooks, so I found it pretty easy to implement this. I just had to add modal show and modal hide to the appropriate hooks.
There seem to be two hooks you can use before the route exits.
The willTransition hook is quite handy. We can use it to hide the modal after the route has transitioned.
didTransition didn’t quite work, because the DOM hasn’t rendered yet. I found
that I could schedule the modal to be shown in the
There are a couple other ways to accomplish this, such as the
in the route. You can read about some more solutions on this stackoverflow post:
You might notice another problem, if you exit the modal by clicking outside of the modal box, the route won’t change, even though the modal is hidden. This will require another hook of sorts.
You can use the bootstrap modal’s callback
'hidden.bs.modal' and call the
transitionTo function to transition back to the main route.
I ended up with something like this:
The markup for the modal itself is in the route’s template.
I changed the exit button to go to the main route: