How to display a component only on the home screen?

Question

Within the application.hbs I have a component called jus-hero:

<header class="bg-leaf">
  {{jus-hero}}
</header>
<main class="l-main">
  {{outlet}}
</main>

How to render this component only on the page index? This setting is in the file app/components/jus-hero.js?

Answer 1

You can set your home as being some specific route, other than the application route. That way, displaying the component in question only on it.

Example:

In your router.js file

Router.map(function() {
  this.route('home', {
    path: '/'
  });
});

And on your home.Hbs (home route template)

{{!-- home.hbs --}}
<header class="bg-leaf">
  {{jus-hero}}
</header>

No application.Hbs keeping only

{{!-- application.hbs --}}

<main class="l-main">
  {{outlet}}
</main>

Answer 2

Simple solution, after a few searches on Github.

Just install the ember install ember-truth-helpers and check with route name:

{{#if (eq currentRouteName 'index')}}
  {{jus-hero}}
{{/if}}

I hope I’m helping others with the same doubt :]

Answer 3

You can use the auxiliary routes.

Example create a template app/templates/index.hbs. Put the contents inside

 {{jus-hero}}

In the application.hbs leave only the bark

<main class="l-main">
  {{outlet}}
</main>

When the route was specifically in on / it will use index. This is for subroutes also example /products/id/index. reference:

https://guides.emberjs.com/release/tutorial/subroutes/#toc_generating-a-nested-index-route