Différences

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

--- richclient:emberjs:templates [2018/01/19 02:36] – [Conditions {#if}] jcheron
+++ richclient:emberjs:templates [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 26: / Ligne 26: @@
 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>
@@ Ligne 56: / Ligne 56: @@
 </sxh>
-==== Conditions {#if} ====
+==== Conditions {{#if}} ====
 === Condition sur une seule ligne ===
@@ Ligne 100: / Ligne 100: @@
 </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>