Templates

Ember utilise handlebars pour la partie templates.

Hamdlebars utilise comme beaucoup d'autres moteurs de templates les doubles accolades {{}} pour faire appel aux expressions.

Hello, <strong>{{firstName}} {{lastName}}</strong>!

Cette utilisation suppose que les propriétés firstName et lastName aient été définies dans le contrôleur associé :

import Controller from '@ember/controller';

export default Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

Les blocks expressions commencent par {# et se terminent par /}

<ul>
  {{#each people as |person|}}
    <li>Hello, {{person.name}}!</li>
  {{/each}}
</ul>

<ul>
  {{#each people as |person index|}}
    <li>Hello, {{person.name}}! You're number {{index}} in line</li>
  {{/each}}
</ul>

{{#each people as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}

<div>
  {{if isFast "zoooom" "putt-putt-putt"}}
</div>

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{/if}}

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}

{{#if isAtWork}}
  Ship that code!
{{else if isReading}}
  You can finish War and Peace eventually...
{{/if}}

unless est la négation du if (if not)

{{#unless hasPaid}}
  You owe: ${{total}}
{{/unless}}