CODEWITHSUNDEEP
ember.js
Bruno Wego
Bruno Wego

Reputation: 2430

How show component only in a specific route?

I have a componente called hero (in application.hbs) and I wish display this componente only in home page.

I researched about how do this but without any success. Thanks!

Upvotes: 1

Views: 641

Answers (4)

sheriffderek
sheriffderek

Reputation: 9043

I can't be sure your reasons, but I suspect that this could be a solution.

There is an invisible 'application' route... there is also an implicit 'index' route, but you can skip the confusion of that and just create a 'home' route and give it a path to the root. The application template will house the outlet - and then you can place your component just in the 'home' template;

(don't write an application route like this, but just for visualization)

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

Here is a twiddle with the full example in place. If this doesn't do what you want, then refer to the conditional suggestions. : )

Router.map(function() {
  // here's an example of skipping of skipping the mysterious 'index' in another situation
  this.route('books', function() {
    this.route('books-list', { path: '/' });
    this.route('book');
  });
});

Upvotes: 1

XYZ
XYZ

Reputation: 27387

You can also render a component dynamically using component helper which save you a conditional statement inside your template.

The first parameter of the helper is the name of a component to render, as a string. So {{component 'blog-post'}} is just the same as using {{blog-post}}.

When the parameter passed to {{component}} evaluates to null or undefined, the helper renders nothing. When the parameter changes, the currently rendered component is destroyed and the new component is created and brought in.

So you can safely pass in anything to the component helper, in your case you can make the component name dynamically without worry an error will raised.

https://guides.emberjs.com/v2.1.0/components/defining-a-component/#toc_dynamically-rendering-a-component

Upvotes: 0

GManProgram
GManProgram

Reputation: 161

I need more specifics, however, I am going to make the assumption that your home route is the '/' route.

The '/' route is actually your index route, so if you create an index.hbs file it will act as the template for your index route. And then your should just move the hero component to your index.hbs file.

Upvotes: 1

Bruno Wego
Bruno Wego

Reputation: 2430

After a few minutes and some searches on GitHub...

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

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

Glad to help!

Upvotes: 1

Related Questions