| 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:33] – jcheron | richclient:emberjs:templates [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| Les blocks expressions commencent par **<nowiki>{#</nowiki>** et se terminent par **<nowiki>/}</nowiki>** | Les blocks expressions commencent par **<nowiki>{#</nowiki>** et se terminent par **<nowiki>/}</nowiki>** |
| |
| ==== Itération sur une liste d'éléments {#each} ==== | ==== Itération sur une liste d'éléments {{#each}} ==== |
| |
| <sxh html> | <sxh html> |
| </sxh> | </sxh> |
| |
| ==== Conditions {#if} ==== | ==== Conditions {{#if}} ==== |
| |
| === Condition sur une seule ligne === | === Condition sur une seule ligne === |
| </sxh> | </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> |