EmberJS-将单独的路线作为模式呈现到特定的出口

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.

Answer 1

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
    }
});