Différences

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

--- richclient:emberjs:td3 [2018/02/12 01:58] – créée jcheron
+++ richclient:emberjs:td3 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 4: / Ligne 4: @@
 |< 100% >|
 | {{::ember.png?150|}} | Tous les exercices utilisent [[https://getbootstrap.com|Bootstrap]] pour la partie CSS. <sxh bash;gutter:false> ember install ember-bootstrap </sxh> |
-| ::: | Pour passer à la v4 de bootstrap (sass requis) : <sxh bash;gutter:false> npm install --save-dev ember-cli-sass
-ember generate ember-bootstrap --bootstrap-version=4</sxh> |
 | ::: | pour les fonts : <sxh bash;gutter:false>ember install ember-font-awesome</sxh> |
 <html></div></html>
@@ Ligne 14: / Ligne 12: @@
   * [[richclient:emberjs:modelobjet:computed]]
   * [[richclient:emberjs:templates:actions]]
+  * [[richclient:emberjs:data]]
+  * [[richclient:emberjs:data:crud]]
 <html></div></html>
-Renommer le projet **td2** en **td2-3**
+<html><div class="note"></html>
-===== -- Exercice : choix multiples =====
+Le plugin **ember-local-storage** remplace le module **ember-localstorage-adapter** auquel la documentation officielle emberJS fait référence.
-==== -- Objectifs ====
+<html></div></html>
+Ajouter le plugin **ember-local-storage** pour stocker des models côté client :
+<sxh bash;gutter:false>
+ember install ember-local-storage
+</sxh>
+===== Adapter et Serializer =====
+Créer l'adapter :
+<sxh bash;gutter:false>
+ember g adapter application
+</sxh>
+Définir le namespace **contact-app**, clé sous laquelle les données seront enregistrées dans le local storage
+<sxh javascript;title:app/adapters/application.js>
+import Adapter from 'ember-local-storage/adapters/local';
+export default Adapter.extend({
+  modelNamespace: 'contact-app'
+});
+</sxh>
+Créer le serializer :
+<sxh bash;gutter:false>
+ember g serializer application
+</sxh>
+<sxh javascript;title:app/serializers/application.js>
+export { default } from 'ember-local-storage/serializers/serializer';
+</sxh>
+===== Gestion des contacts =====
+==== - Objectifs ====
   - Models et Store
   - Computed properties
   - Création de composants
-==== -- Fonctionnalités ====
+==== - Fonctionnalités ====
   - Obtenir la liste des contacts et la filtrer
   - Ajouter un contact dans la liste
@@ Ligne 36: / Ligne 70: @@
 ^::: | <html><span class="variable">prenom</span></html>\\ string |
 ^::: | <html><span class="variable">email</span></html>\\ string |
-^::: | <html><span class="variable">deleted</span></html>\\ false |
+==== - Route/Model/actions ====
-==== -- Route/Model/actions ====
 === /contacts ===
@@ Ligne 49: / Ligne 81: @@
 ^::: | <html><span class="variable">deleteds</span></html>\\ Liste des contacts supprimés |
 ^::: | <html><span class="variable">deletedsCount</span></html>\\ Nombre de contacts supprimés |
+^Route handler | <html><span class="method">model()</span></html>\\ Retourne une instance de Contacts initialisée avec le **datas** des contacts provenant du store  |
 ^**actions** | <html><span class="method">delete(contact)</span></html>\\ Supprime le contact (sans sauvegarde dans le store)  |
 ^::: | <html><span class="method">cancelDeletion(deleteds)</span></html>\\ Annule la suppression de tous les contacts supprimés  |
@@ Ligne 60: / Ligne 93: @@
 === /contacts/edit ===
-Affiche le formulaire de modificatio d'un contact
+Affiche le formulaire de modification d'un contact
 |< 100% >|
@@ Ligne 66: / Ligne 99: @@
 ^**actions** | <html><span class="method">updateContact(datas)</span></html>\\ Modifie le contact dans le store  |
-==== -- Vues ====
+==== - Vues ====
-=== -- Interface ===
+=== - Interface ===
 {{:slam4:richclient:angularjs:ex3.png?600|}}
 <html><a target="_new" href="http://angular.kobject.net/ex4" class="btn">Tester l'appli <b>Gestion de contacts</b></a></html>
-=== -- Logique applicative / comportement de l'interface ===
+=== - Logique applicative / comportement de l'interface ===
   * Zone filter : filtre l'ensemble des contacts affichés.