Ember.js: How to make children routes display in the parent resource

lately I have been reading through the ember documentation and following as best I can. I have made good progress which I thank God for but lately I have had troubles with routing. Specifically I can get templates to display in the application template but I cannot get children routes to display in the parent resources template. Instead the child template actually replaces it. Here's my code:

index.html

<script type="text/x-handlebars" data-template-name="modals">
        <h2>Modals Parent Route</h2>
       <p>This is the modals route which is common to all modals</p>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="modals/layout">
       <h2>Layout Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/visuals">
       <h2>Visuals Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/finish">
       <h2>Finish Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/preview">
       <h2>Preview Route</h2>
    </script>

App.js

App.Router.map(function(){
    this.resource('modals', { path:'/modals' }, function(){
    this.route('layout');
    this.route('visuals');
    this.route('finish');
    this.route('preview');
    });
});
App.LayoutRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('modals.layout',{
           into: 'modals',
        });
    }

This is not the full code but I thought it would be all that pertains to this topic. Please feel free to ask me if you need the full file contents.