Différences

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

--- richclient:emberjs:td0 [2018/01/23 18:19] – [Commandes] jcheron
+++ richclient:emberjs:td0 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 31: / Ligne 31: @@
 </sxh>
-==== Commandes ====
+===== Création d'une route =====
 Création d'une route (se placer dans le dossier du projet) :
@@ Ligne 37: / Ligne 37: @@
 <sxh bash;gutter:false>
 ember generate route user
+</sxh>
+ou en version plus courte :
+<sxh bash;gutter:false>
+ember g route user
 </sxh>
 L'url **<nowiki>http://127.0.0.1:4200/user</nowiki>** est maintenant accessible.
+===== Data-binding =====
+Dans app/templates/user.hbs
+<sxh html>
+{{input value=this.nom}}
+<div>{{nom}}</div>
+</sxh>
+===== Routage =====
+Cet exemple illustre les routes imbriquées
+Créer une route **client**
+Définir le model hook dans app/routes/client.js
+<sxh javascript>
+export default Route.extend({
+  model(){
+    return {nom:'Smith',
+            details:'Des détails sur Smith...'}
+  }
+});
+</sxh>
+Dans app/templates/client.hbs
+<sxh html>
+<h1>{{model.nom}}</h1>
+{{#link-to "client.details"}}
+  Détails
+{{/link-to}}
+{{outlet}}
+</sxh>
+Créer une route **client/details**
+Modifier **app/routes/client/details.js** pour y ajouter une action permettant de masquer le detail (en retournant à la page client)
+<sxh javascript>
+export default Route.extend({
+  actions:{
+    fermer(){
+      this.transitionTo('client');
+    }
+  }
+});
+</sxh>
+Modifier le template **app/templates/client/details.hbs** :
+<sxh html>
+{{model.details}}
+<button {{action "fermer"}}>Fermer</button>
+</sxh>