Nested routes and outlets within outlets

Question

This could be a rather trivial question, but as an Ember beginner, I am struggling with it a bit.

The site I'm building has a parent navigation, but some of the templates inside its outlet may have their own navigation and their own outlet (at least that's what I'm intending). In other words, I might have something like (skipping a lot of HTML):

<script type="text/x-handlebars" data-template-name="application">
    <nav>
        <ul class="nav">
            <li>{{#link-to 'index'}}Home{{/link-to}}</li>
            <li>{{#link-to 'testing'}}Testing{{/link-to}}</li>
        </ul>
    </nav>
    <div>{{outlet}}{/div>
</script>

<script type="text/x-handlebars" data-template-name="testing">
    <ul class="nav">
        <li>{{#link-to 'testing.encoding'}}Encoding{{/link-to}}</li>
        <li>{{#link-to 'testing.user'}}User Admin{{/link-to}}</li>
    </ul>
    <div>{{outlet}}{/div>
</script>

<script type="text/x-handlebars" data-template-name="testing/encoding">
    <h3>Encoding</h3>
</script>

<script type="text/x-handlebars" data-template-name="testing/user">
    <h3>User Admin</h3>
</script>

The application template wires great. Click on "Home", you get the index template; click on "Testing", you get the testing template. Super. What I want is for when they click "Encoding", the route is then /testing/encoding and the testing/encoding template is rendered in the outlet inside of testing. My Router looks like this:

App.Router.map(function() {
    this.route('testing', function() {
        this.route('encoding');
        this.route('users');
    });
});

However, the page won't load at all, giving me: Uncaught Error: There is no route named encoding.index. I suspect I named my templates poorly, or configured my Router incorrectly, or perhaps need to name the outlet in the testing template... and I've attacked those potential issues, but have yet to come up with a resolution.

Ideas? This is probably a typical pattern and likely has a clean, easy solution with minimal javascript. I'm just not seeing it, I suppose.

kiwiupover kiwiupover · Accepted Answer · 2014-03-15T06:54:46

You want your router to look like this.

App.Router.map(function() {
    this.resource('testing', function() {
        this.route('encoding');
        this.route('users');
    });
});

You can't nest a route under a route. What you get with the resource is the leaf routes of index, loading and error.

There is not route encoding.index in this router.

The routing guide here is really helpful.

Cheers

Nested routes and outlets within outlets

2 Answers