How to display a component only on the home screen?

Asked

Viewed 50 times

0

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?

3 answers

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>

0


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 :]

0

Browser other questions tagged

You are not signed in. Login or sign up in order to post.