To this point we have looked at using conditionals in our templates using block level if statements. They look like this:

{{#if someBool}}
  Some Markup...
{{else}}
  Some Alternative Markup
{{/if}}

We also can use {{#unless}} in exactly the same way:

{{#unless someBool}}
  Some Alternative Markup
{{else}}
  Some Markup...
{{/unless}}

There is one other use of {{else}}. When we have an {{#each}}...{{/each}} block we can use {{else}} to display some markup if there are no items in the array that are being iterated over.

{{#each people as |person|}}
  {{person.fullName}}
{{else}}
  There are no people.
{{/each}}

That is the block usage of conditionals in templates. One thing to be aware of is that a bunch of conditionals can have a performance impact on your render time. The potential impact is probably getting less pronounced over time as Ember's rendering engine improves, but it is something to be conscious of as you build your templates. One possible way to mitigate this impact is, where it makes sense, use inline conditionals to change class names and modify display properties with css. This isn't always the best approach. When needed you can use conditionals inline like this:

<div class='some-static-class {{if someBool "true-class" "false-class"}}'>
  Hello
</div>

In this case, if someBool is truthy, our div gets the class "true-class", if it is falsy, our div gets the class "false-class".

That is it for today. See you tomorrow.

Links