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.
Let's take a look at a simple example that displays text if some property is true.
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.
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
.
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
.
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}}
The preceding example shows two statements, {{if}}
and {{else}}
, both in the block form. Only the statement that is true will be displayed.
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.http://localhost:4200/conditional
route. The {{outlet}}
in application.hbs
will render the conditional
template inside of it.Inline invocation can be used to display data with if
statements, all within one line of code.
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'}}
#
or end the if
block with {{/if}}
. Everything can be written in one expression.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
.Nested invocations are inline, which means that they return a single value. They can also accept multiple nested if
statements in the inline helper.
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
.
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.
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.
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.