Différences

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

--- richclient:emberjs:td0 [2018/01/23 17:31] – créée jcheron
+++ richclient:emberjs:td0 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== TD n°0 ======
-Exemple de démonstration
+Exemple de démonstration : projet **first-app**
+===== Objectifs =====
+  - Créer des routes, des models, utiliser les templates
+  - Montrer la cohérence et la simplicité du framework
+===== Pré-requis =====
+==== Installations ====
+  * Node + npm
+  * ember-cli
+  * WebStorm + ember.js plugin
+  * plugin **Ember inspector**
+==== Création du projet ====
+Créer le projet **first-app** dans votre dossier local **ember-tds**
+<sxh bash;gutter:false>
+cd ember-tds
+ember new first-app
+</sxh>
+Démarrer le serveur ember :
+<sxh bash;gutter:false>
+cd first-app
+ember serve
+</sxh>
+===== Création d'une route =====
+Création d'une route (se placer dans le dossier du projet) :
+<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>