Series: EmberSchool Samples: Intermediate Components

Block Components

Published on Jul 27, 2016

Learn how to create and use block components and the {{yield}} helper.

Using blocks with your components allows your components to be much more flexible.

Code

//templates/components/email-status.hbs
<div class="email-status">
  <p>Thanks for visiting the {{pageName}} page at Menu Tracker.  You can email me at jeffrey@emberschool.com.</p>

  {{yield}}

  {{#if hasBlock}}
    <p>You're using a block component!</p>
  {{else}}
    <p>Sorry, no block component</p>
  {{/if}}
</div>
//templates/about.hbs
{{#email-status}}
  <p>This is only on the About page.</p>
{{/email-status}}

Transcript

So far when we’ve created components, how we use them is first we declare the component name, and then we give it some parameters, whether they’re positional parameters or named parameters. But there’s another way to create components called block components.

So for example, here’s a link-to helper that does not have a block, whereas here is a link-to helper that does have a block. So to make it a little bit more clear on what the block is, here is the block and it’s between the opening part of the link-to component and the closing part. So the opening part starts with a hash. That’s how it’s set apart from the other types of link-to components. And the closing part has a slash.

So in this video, we’re going to make it so our email-status component can be used as a block component. But first, let’s go ahead and set up our email-status so that there’s a need for a block component. So first we’ll wrap everything in a div with the class email-status. And then we’ll use css on that class in order to put a border around it.

This is what it will look like. So it’s quite set off in the page. And what we want to do is put a message in here, in this box, that is only visible on the About page and not on the Contact page or the Foods page. We’ll see what happens if we try to include the message in a paragraph below the component. What happens is it’s on the page but it’s not within this box like we wanted it to be. The answer is to use a block component. This is what we’ll want this handlebars to look like when we’re done. And the way to achieve this is we just put a yield statement within the handlebars of the component. That yield statement will be where this block is displayed, just like that. And as you’ll see, the other components, they still work just fine as nonblock components. They just don’t put anything into yield. That’s just blank for them.

So to go over that one more time, if you have a yield block and you create a block component by starting out the name with the hash symbol and then having a closing tab here, then whatever you put in between that opening and that closing will get put into yield. And if you don’t have anything in that opening or that closing, such as using it like this, then it just won’t use that yield statement.

There’s one more thing I do want to tell you about. So there’s the hasBlock boolean. So you can say things like if hasBlock, then when we put in You’re using a block component!, otherwise we’ll just say, Sorry, no block component, and we’ll see that here in Contact we’re not using a block component. So hasBlock is false. But in About, hasBlock is true, so it shows that.

EmberSchool Samples: Intermediate Components

Subscribe to our mailing list