Search code examples
javascriptember.jshandlebars.js

Ember nested route template with conditional HTML in place of outlet

I have a nested route that looks like:

/products
/products/:productId

And the /products template renders with a sidebar listing all the products, and a "main" content <div> in the center that is populated with a specific product when clicked. ie:

<div id="productsSidebar">
    ... navigation tree ...
</div>
<div id="mainContainer">
    {{outlet}}
</div>

However, I would like for the {{outlet}} to be replaced with a message like

Please select a product to the left.

When there is no child route, ie. we're just looking at /products and the main <div> is otherwise completely empty.

I haven't found any reference/tutorial demonstrating if this is possible - is there a standard way to render a "default" block of HTML if there no outlet available?

Solution

  • You can use the products index route template to display that html text. You may need to generate the route with something like ember g route products/index