Adding route to a modal/overlay in Ember.js -

i know ember's mantra url first , url should serialization of page contents, have scenario want create route component/page live in modal, , accessible various places throughout site. want url represent actual route of resource, not change if resource happened nested in route.

a similar example pinterest. when looking @ feed of pins on root route. can search pins , directed /search/pins route.

from both of these routes, can click on pin, open in modal/overlay, , change url url of pin. since can view pins different areas of site, background behind overlay various routes depending on click pin from, not serialized version of route.

is type of functionality possible in ember? if so, resources/hints review?

- ac.

this question might pointer, have done before using render method inside of activate hook in route.

so modal template injected named outlet (e.g {{outlet 'modal'}}) when enter given route.

here example of method described in project working on.

in parent route have action called openeditmodal (in case load of logic getting model of view edit button pressed , setting on edit routes controller). action transitionto edit route.

    openeditmodal: function(eventmodel) {          // logic here setting model modal          // transition edit route         this.transitionto('patient.events.edit');     }, 

so when edit route active:

activate: function() {      // render template in 'modal' outlet     this.render('path/to/modal/template', {         controller: 'patient.events.edit', // controller use injected template         view: 'patient.events.edit', // view use injected template          into: 'patient.events', // parent template inject template         outlet: 'modal' // name of outlet in parent template     });  },