How to make modals which have routes like Trello in Emberjs - ember.js

Question

I want to know how we can make modals which have routes.
In Trello, whenever you click on a card, the route changes from abc.com/b/personal to abc.com/c/some-random-string and the card opens in a modal. Also, when you close the modal, you get redirected to the previous url (abc.com/b/personal).
I want to know how can we achieve this using Emberjs.
Example: https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample

Answer 1

Here is my modal (using foundation) where we delete a record:
<div class="reveal" id="deleteLocationModal" data-reveal>
<div class="row">
<div class="columns">
Are you sure you want to delete this location?
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="columns">
<button id="cancelButton" class="secondary button" data-close type="button">Cancel</button>
<button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button>
</div>
</div>
</div>
The router has the falling in the actions hash:
actions: {
deleteLocation(model) {
Ember.assert("Params must be provided", model);
model.save().then(( /* response */ ) => {
this.transitionTo('locations'); //locations is my index page.
//flash message to inform the user of success.
});
}, (error) => {
//handle error.
// display flash message
// rollback any dirty attributes
});
}
I hope this helps,
Jeff