Conditional Content

Let's take a look at two components that display a person's username.

<h4 class="username">
  Tomster
  <span class="local-time">their local time is 4:56pm</span>
</h4>

<h4 class="username">
  Zoey
</h4>

The components look similar, don't they? The first component shows extra information about the user's local time.

Let's say we tried to create a single username component.

<h4 class="username">
  {{@name}}
  <span class="local-time">their local time is {{@localTime}}</span>
</h4>

If the <Username> tag doesn't specify a @localTime argument, we will see an extra, incomplete text, their local time is, on the screen.

What we need is a way to display the local time if @localTime exists. We can do this with an if.

<h4 class="username">
  {{@name}}
  {{#if @localTime}}
    <span class="local-time">their local time is {{@localTime}}</span>
  {{/if}}
</h4>

Zoey says...

Just like in JavaScript, 0, false, null, undefined, and the empty string are falsy in Ember templates. Unlike in JavaScript, the empty array is also considered falsy in Ember templates.

{{#if condition}}
  {{!-- some content --}}
{{/if}}

This is the syntax for an if statement in block form. If the condition is true, Ember will render the content that is inside the block.

Like many programming languages, Ember also allows you to write if else and if else if statements in a template.

{{#if condition}}
  {{!-- some content --}}
{{else}}
  {{!-- some other content --}}
{{/if}}

{{#if condition1}}
  ...
{{else if condition2}}
  ...
{{else if condition3}}
  ...
{{else}}
  ...
{{/if}}

Sometimes, you will want to conditionally set an argument or attribute.

For instance, consider two components that display a user's avatar. One is for a recipient and the other for a sender.

<aside>
  <div
    class="avatar is-active"
    title="Tomster's avatar"
  >
    T
  </div>
</aside>

<aside class="current-user">
  <div
    class="avatar"
    title="Zoey's avatar"
  >
    Z
  </div>
</aside>

Again, the two components look similar. The first component has an is-active class, while the second a current-user class. How should we unify the components into one?

The is-active class is responsible for showing the active icon. How that icon is rendered may change over time, so we won't use ...attributes to apply the is-active class. Instead, we'll pass the argument @isActive to dictate what to do (e.g. render the icon).

As for the current-user class, it may have been just one of a few classes that can be applied to the <aside> element. Let's use ...attributes to apply the current-user class.

We take these API designs into account and end up with a reusable component. The component uses an inline if to conditionally apply the is-active class.

<aside ...attributes>
  <div
    class="avatar {{if @isActive "is-active"}}"
    title={{@title}}
  >
    {{@initial}}
  </div>
</aside>

Afterwards, we can refactor the initial components.

<Avatar
  @isActive={{true}}
  @title="Tomster's avatar"
  @initial="T"
/>

<Avatar
  class="current-user"
  @title="Zoey's avatar"
  @initial="Z"
/>

Zoey says...

When passing a literal JavaScript value to a component, we have to wrap the value in double curlies (e.g. @isActive={{true}}). A value that isn't wrapped in curlies is assigned as string, which matches the behavior in HTML attributes. For example, writing @isActive=true will set @isActive to the string 'true'.

{{if condition value}}

This is the syntax for an if statement in inline form. If the condition is true, Ember will use value at the invocation site.

Ember also allows you to write an if else statement in inline form. It looks similar to a ternary operator.

{{if condition value1 value2}}

Please see the API documentation of the if helper for more patterns.