Différences

Ci-dessous, les différences entre deux révisions de la page.

--- richclient:emberjs:templates [2018/01/19 01:58] – jcheron
+++ richclient:emberjs:templates [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 2: / Ligne 2: @@
 Ember utilise [[http://www.handlebarsjs.com/|handlebars]] pour la partie templates.
 Hamdlebars utilise comme beaucoup d'autres moteurs de templates les doubles accolades <nowiki>{{}}</nowiki> pour faire appel aux expressions.
+===== Affichage de variables =====
+<sxh html;title:app/templates/application.hbs>
+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>