Working with conditionals in templates

Using conditionals is fundamental to using Ember's templating engine. In the following recipes, we'll take a look at conditionals and how they work with templates.

How to do it...

Let's take a look at a simple example that displays text if some property is true.

1. Create a new project and generate a new controller called conditional. Run this command in the root of the application folder to create controller and template:

   $ ember g controller conditional
   $ ember g template conditional
   

   This will create the conditional controller.

2. Update the router.js file with the new conditional route:

   // app/router.js
   …
   Router.map(function() {
     this.route('conditional');
   });

   This will add a new conditional route. To access this route using the Ember server, open a web browser and navigate to http://localhost:4200/conditional.

3. Update the conditional controller with the isHomeworkDone property:

   // app/controllers/conditional.js
   import Ember from 'ember';
   
   export default Ember.Controller.extend({
       isHomeworkDone: true});

   This will create a new isHomeworkDone property and default it to true.

4. Update the conditional template so that it will display one message if isHomeworkDone is true and another message if it isn't:

   // app/templates/conditional.hbs
   Hello!
   {{#if isHomeworkDone}}
    Thanks for finishing the homework!
   {{else}}
    Please finish the homework
   {{/if}}

   Note

   The {{if}} statement is a helper and must be surrounded by curly braces {{}} like any other Handlebar expression. It begins with a # sign, which indicates that it's a form of a block invocation. The {{/if}} statement closes the statement.

   The preceding example shows two statements, {{if}} and {{else}}, both in the block form. Only the statement that is true will be displayed.

5. As we know from the controller earlier, if isHomeworkDone is true, the statement Thanks for finishing the homework! will be displayed after the template is rendered. On the other hand, if isHomeworkDone was false, the statement Please finish the homework will be displayed.
6. To test this example, navigate to the http://localhost:4200/conditional route. The {{outlet}} in application.hbs will render the conditional template inside of it.

Using inline invocation with templates

Inline invocation can be used to display data with if statements, all within one line of code.

1. We'll take the previous example and recreate it using inline invocation. Edit the condtional.hbs file in the app/templates folder with the new if statement using inline invocation:

   // app/templates/conditional.hbs
   Hello
   
   {{if isHomeworkDone 'Thanks for finishing the homework!' 'Please finish the homework'}}

2. When using inline invocation, you don't need to use the pound sign # or end the if block with {{/if}}. Everything can be written in one expression.
3. The first argument of the helper after isHomeworkDone, Thanks for finishing the homework!, will be shown only if isHomeworkDone is true. The second argument, Please finish the homework, will be displayed if isHomeworkDone is false.

Working on nested invocation with templates

Nested invocations are inline, which means that they return a single value. They can also accept multiple nested if statements in the inline helper.

1. In the conditional controller, add a couple of properties called isHomeworkDone and isChoresDone:

   // app/controllers/conditional.js
   import Ember from 'ember';
   
   export default Ember.Controller.extend({
     isHomeworkDone: true,
     isChoresDone: true});

   Both of these are defaulted to true.

2. Let's use nested invocation to display a message only if both isHomeworkDone and isChoresDone are true. Edit the condtional.hbs file with the new nested if statement:

   // app/templates/conditional.hbs
   Hello
   
   {{if isHomeworkDone (if isChoresDone 'Thanks for finishing the homework!' )}}

   The Thanks for finishing the homework string will display only if both isChoresDone and isHomeworkDone are true. Otherwise, nothing is displayed. As the controller has both values set to true, the message will display Thanks for finishing the homework! after the template is rendered.

The opposite of if is unless

Another useful helper is unless. It works exactly the opposite of the if helper. It can work with all three invocation styles—inline, block, and nested.

We'll create the unless block that will display a string if it's not true in our conditional.hbs file:

// app/templates/conditional.hbs
Hello

{{#unless isHomeworkDone}}
  Please finish the homework
{{else}}
  Thanks for finishing the homework!
{{/unless}}

In this block, the unless helper will display Please finish the homework only if isHomeworkDone is false. On the other hand, the message Thanks for finishing the homework! will be displayed if isHomeworkDone is true. This is essentially the opposite of the if helper.

In this example, assuming that isHomeworkDone is true, the Thanks for finishing the homework! string will be displayed in the template after it's rendered.

How it works...

The if and unless conditionals are built-in helpers that are made available to us from the Handlebars templating engine. They are surrounded by curly braces {{}}, which tell Handlebars to interpret them. The {{if}} statement checks whether the property is true. JavaScript values such as undefined, null, '' , [], and numeric 0 will return as false.

There are three different ways in which these conditional helpers can be invoked—block, nested, or inline. All three will work with if and unless helpers.