Adding route to a modal/overlay in Ember.js

Question

I know Ember's mantra is URL first and the URL should be a serialization of the page contents, but I have a scenario where I want to create a route for a component/page that will live in a modal, and be accessible from various places throughout the site. I always want this URL to represent the actual route of the resource, not change if the resource happened to be nested in another route.

A similar example is Pinterest. When you are looking at the feed of pins you are on the root route. You can also do a search for pins and you are then directed to the /search/pins route.

From both of these routes, you can click on a pin, which will open it up in a modal/overlay, and also change the url to the url of the pin. Since you can view pins from different areas of the site, the background behind the overlay will be various routes depending on where you click the pin from, not a serialized version of the route.

Is this type of functionality possible in Ember? If so, any resources/hints to review?

- ac.

Answer 1

This SO Question might be a pointer, I have done this before using the render method inside of the activate hook in the route.

So my modal template is injected into a named outlet (e.g {{outlet 'modal'}}) when you enter a given route.

Here is an example of the method I described in a project that I am currently working on.

In the parent route I have an action called openEditModal (in my case I do a load of logic like getting the model of the view where the edit button is pressed and setting that on the edit routes controller). This action ultimately transitionTo the edit route.

    openEditModal: function(eventModel) {

        // Do any logic here like setting the model for the modal

        // Transition to the edit route
        this.transitionTo('patient.events.edit');
    },

So when the edit route is active:

activate: function() {

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

},