Ceci est une ancienne révision du document !
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.
Affichage de variables
1 |
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é :
1 2 3 4 5 6 |
import Controller from '@ember/controller';export default Controller.extend({ firstName: 'Trek', lastName: 'Glowacki'}); |
Block expressions
Les blocks expressions commencent par {# et se terminent par /}
Itération sur une liste d'éléments {#each}
1 2 3 4 5 |
<ul> {{#each people as |person|}} <li>Hello, {{person.name}}!</li> {{/each}}</ul> |
Itération avec utilisation de l'index
1 2 3 4 5 |
<ul> {{#each people as |person index|}} <li>Hello, {{person.name}}! You're number {{index}} in line</li> {{/each}}</ul> |
Itération avec une éventuelle liste vide
1 2 3 4 5 |
{{#each people as |person|}} Hello, {{person.name}}!{{else}} Sorry, nobody is here.{{/each}} |
Conditions {#if}
Condition sur une seule ligne
1 2 3 |
<div> {{if isFast "zoooom" "putt-putt-putt"}}</div> |
Condition multi-lignes
1 2 3 |
{{#if person}} Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!{{/if}} |