EmberJS - Rendering separate route as a modal into a specific outlet

Question

In my EmberJS applications I have two separates routes as follows,

Route A - "main/books/add" Route B - "main/authors/add"

I have an "Add Authors" button In Route A template and when a user presses that button I want to load and render Route B in a modal to add new authors.

I know its possible to achieve somewhat smiler to this by using the route's render method to render the Route B template and respective controller. But in that case, the "model" hook of Route B in "main/authors/add.js" file does not get invoked.

It would be really nice if someone can suggest me a method to render a separate route into a modal.

Stephen Wright · Answer 1 · 2015-07-15T10:38:29.543

EDIT - Although this is entirely valid (the premise of rendering into using named outlets, views are now deprecated in Ember 1.1. The same can be achieved by using a Component

Yup, you can do this:

What you'd want to do is create a modal in a template and assign a named outlet into it (or create a view that is a modal with an outlet):

in modal.hbs:

<div class='modal'>
    {{outlet "modalContent"}}
</div>

Then I would override your base button like so:

App.BasicButton = Em.View.extend({
    context: null,
    template: Em.Handlebars.compile('<button>Click Me!</button>');
    click: function(evt) {
        this.get('controller').send('reroute', this.get('context'));
    }
});

And in your template set up your button to trigger your modal:

in trigger.hbs

<!-- content and buttons for doing stuff -->
{{View App.BasicButton context='modalContent'}}

Finally, you want to create a method in your route which handles rendering specific content into your outlet:

App.TriggerRoute = Em.Route.extend({
    actions: {
        reroute: function(route) {
            this.render(route, {into: 'modal', outlet: route});
        }
    }
});

So in essence, you're rendering the template (called "modalContent") into a specific outlet (called "modalContent"), housed within the template/view (called "modal")

You would also want to write some logic to trigger the modal to open on element insertion. To do that, I would use the didInsertElement action in the modal view:

App.ModalView = Em.View.extend({
    didInsertElement: function() {
        this.$.css("display", "block");
        //whatever other properties you need to set to get the modal to pop up
    }
});

Thanks for the quick response Fishbowl. Is there a way to do this without using Views? something like, just directly rendering a route to a different outlet. — PIKP, Jul 15 '15 at 10:33
Well views are deprecated now anyway (I was basing my answer on an old blog post I wrote.) I was just looking up how to do it with components, but fundamentally if you hook up the click action on a button to the 'reroute' function, either in a controller or a route, you should be able to do the same thing, the basic premise of rendering into a named outlet is still valid. — Stephen Wright, Jul 15 '15 at 10:36
Im afraid the reroute function is capable of invoking the respective route with available hooks such as "model". — PIKP, Jul 15 '15 at 10:45

EmberJS - Rendering separate route as a modal into a specific outlet

1 Answers1