| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| richclient:emberjs:templates [2018/01/19 02:00] – jcheron | richclient:emberjs:templates [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| <sxh html;title:app/templates/application.hbs> | <sxh html;title:app/templates/application.hbs> |
| Hello, <strong>{{firstName}} {{lastName}}</strong>! | Hello, <strong>{{firstName}} {{lastName}}</strong>! |
| | </sxh> |
| | |
| | Cette utilisation suppose que les propriétés **firstName** et **lastName** aient été définies dans le contrôleur associé : |
| | |
| | <sxh javascript;title:app/controllers/application.js> |
| | import Controller from '@ember/controller'; |
| | |
| | export default Controller.extend({ |
| | firstName: 'Trek', |
| | lastName: 'Glowacki' |
| | }); |
| | </sxh> |
| | |
| | |
| | ===== Block expressions ===== |
| | Les blocks expressions commencent par **<nowiki>{#</nowiki>** et se terminent par **<nowiki>/}</nowiki>** |
| | |
| | ==== Itération sur une liste d'éléments {{#each}} ==== |
| | |
| | <sxh html> |
| | <ul> |
| | {{#each people as |person|}} |
| | <li>Hello, {{person.name}}!</li> |
| | {{/each}} |
| | </ul> |
| | </sxh> |
| | |
| | === Itération avec utilisation de l'index === |
| | |
| | <sxh html> |
| | <ul> |
| | {{#each people as |person index|}} |
| | <li>Hello, {{person.name}}! You're number {{index}} in line</li> |
| | {{/each}} |
| | </ul> |
| | </sxh> |
| | |
| | === Itération avec une éventuelle liste vide === |
| | |
| | <sxh html> |
| | {{#each people as |person|}} |
| | Hello, {{person.name}}! |
| | {{else}} |
| | Sorry, nobody is here. |
| | {{/each}} |
| | </sxh> |
| | |
| | ==== Conditions {{#if}} ==== |
| | |
| | === Condition sur une seule ligne === |
| | |
| | <sxh html> |
| | <div> |
| | {{if isFast "zoooom" "putt-putt-putt"}} |
| | </div> |
| | </sxh> |
| | |
| | === Condition multi-lignes === |
| | |
| | <sxh html> |
| | {{#if person}} |
| | Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! |
| | {{/if}} |
| | </sxh> |
| | |
| | === else === |
| | <sxh html> |
| | {{#if person}} |
| | Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! |
| | {{else}} |
| | Please log in. |
| | {{/if}} |
| | </sxh> |
| | |
| | === elseif === |
| | <sxh html> |
| | {{#if isAtWork}} |
| | Ship that code! |
| | {{else if isReading}} |
| | You can finish War and Peace eventually... |
| | {{/if}} |
| | </sxh> |
| | |
| | === unless === |
| | unless est la négation du if (if not) |
| | <sxh html> |
| | {{#unless hasPaid}} |
| | You owe: ${{total}} |
| | {{/unless}} |
| | </sxh> |
| | |
| | ==== liens {{link-to}} ==== |
| | link-to permet de générer des liens href et prend 1 ou 2 arguments : |
| | * le premier est le nom d'une route |
| | * le second (facultatif) correspond à l'id d'un model pour les segments dynamiques |
| | |
| | Avec la route déclarée dans router.js suivante : |
| | <sxh javascript;title:app/router.js> |
| | Router.map(function() { |
| | this.route('photos', function(){ |
| | this.route('edit', { path: '/:photo_id' }); |
| | }); |
| | }); |
| | </sxh> |
| | |
| | et le fichier de template : |
| | <sxh html;title:app/templates/photos.hbs> |
| | <ul> |
| | {{#each photos as |photo|}} |
| | <li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li> |
| | {{/each}} |
| | </ul> |
| | </sxh> |
| | |
| | Ember génère le html : |
| | |
| | <sxh html> |
| | <ul> |
| | <li><a href="/photos/edit/1">Happy Kittens</a></li> |
| | <li><a href="/photos/edit/2">Puppy Running</a></li> |
| | <li><a href="/photos/edit/3">Mountain Landscape</a></li> |
| | </ul> |
| | </sxh> |
| | |
| | === Liens inline === |
| | |
| | <sxh html> |
| | A link in {{#link-to "index"}}Block Expression Form{{/link-to}}, |
| | and a link in {{link-to "Inline Form" "index"}}. |
| | </sxh> |
| | |
| | Génère le code html suivant : |
| | <sxh html> |
| | A link in <a href="/">Block Expression Form</a>, |
| | and a link in <a href="/">Inline Form</a>. |
| </sxh> | </sxh> |