Ember.js Rendering outlet as a modal window

Question

I'm trying to render a modal. For that I've created a custom outlet using {{outlet modalOutlet}} My application template has two outlets, the default outlet and the modalOutlet. However when the modal template is rendered into {{outlet modalOutlet}} , my default {{outlet}} becomes empty.

How do I change it, so that the default {{outlet}} doesn't change, so I can actually render {{outlet modalOutlet}} as modal window, or as a sidebar as a part of a layout

I'm not sure if this is due to my code, or something about the renderTemplate() method that I'm missing. The jsFiddle with my code is here .

// Router
App.Router.map(function(){
    this.route('contributors');
    this.route('contributor', {path: '/contributors/:contributor_id'});
});


App.ContributorsRoute = Ember.Route.extend({
    model: function() {
        return App.Contributor.all();
    },
});

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

<script type="text/x-handlebars" data-template-name="application">  
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "contributors"}}Contributors{{/linkTo}}
    </nav>
    <div style='padding:5px;margin:5px;border:1px dotted red;'>
        Default Outlet
        {{outlet}}
    </div>
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>    
        modalOutlet
        {{outlet modalOutlet}}
    </div>
</script>

Answer 1

You must render the contributors template as well, since the default outlet gets cleared when you transition to a sibling route.

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributors');
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

You can avoid this, however, if you nest your routes like this:

App.Router.map(function(){
    this.resource('contributors', function() {
        this.route('show', {path: ':contributor_id'});
    });
});

...and adjust the rest of your app to match the new structure. In this case, you need to specify the place the modalOutlet lies with the into option (in this case: 'application' )

Answer 2

The issue is your routing structure is not nested, and once you nest your routes you will need to specify the route which contains the modal outlet.

What is happening is you render

Application -> Contributors

to show your list, but when you click a link you are now rendering

Application -> Contributor

and the Contributor template is removed.

If you nest your routes, like this:

Application -> Contributors -> Contributor

Then you will still have the Contributors template showing the list.

updated JSFiddle

//Router
App.Router.map(function(){
    this.resource('contributors', function() {
        this.resource('contributor', {path: '/:contributor_id'});
    });   
});

//Route
App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            into: 'application',
            outlet: 'modalOutlet'
        });
    }
});