Ember Best Practices: Handlebars's Overlooked {{#each}} {{else}} Conditional Block

In the past few months, my esteemed coworkers have written about various Ember best practices. To follow suit, I’d like to reintroduce an often forgotten Handlebars trick.

How many times have you stumbled across a template that wrapped an {{#each}} block with an outer {{#if}} conditional block?

The Verbose

{{! if-and-each-usage.hbs}}

{{#if footballTeams}}
  {{#each footballTeams as |team|}}
    Teamname: {{team.name}}
    City: {{team.city}}
    Mascot: {{team.mascot}}
  {{/each}}
{{else}}
  No teams to display!
{{/if}}

Logically, this makes sense. If there aren’t footballTeams to iterate through, we render out a message.

However, the result is an unnecessary conditional! Thankfully, the {{#each}} block helper provides us with a more terse solution.

The Succinct

{{! each-else-usage.hbs}}

{{#each footballTeams as |team|}}
  Teamname: {{team.name}}
  City: {{team.city}}
  Mascot: {{team.mascot}}
{{else}}
  No teams to display!
{{/each}}

We don’t need the outer {{#if}} block, and we simply can add an {{else}} path within our {{#each}} block.

Although, the change here seems quite trivial, it immediately cleans up readibility (which is a huge win in my book).

More to Come

If you’ve enjoyed these series of best practices, stay tuned, we’ll be writing more posts soon after the holidays! Thanks!