TD n°3
Tous les exercices utilisent Bootstrap pour la partie CSS. ember install ember-bootstrap |
|
pour les fonts : ember install ember-font-awesome |
Prérequis :
Le plugin ember-local-storage remplace le module ember-localstorage-adapter auquel la documentation officielle emberJS fait référence.
Ajouter le plugin ember-local-storage pour stocker des models côté client :
ember install ember-local-storage
Adapter et Serializer
Créer l'adapter :
ember g adapter application
Définir le namespace contact-app, clé sous laquelle les données seront enregistrées dans le local storage
import Adapter from 'ember-local-storage/adapters/local'; export default Adapter.extend({ modelNamespace: 'contact-app' });
Créer le serializer :
ember g serializer application
export { default } from 'ember-local-storage/serializers/serializer';
Gestion des contacts
- Objectifs
- Models et Store
- Computed properties
- Création de composants
- Fonctionnalités
- Obtenir la liste des contacts et la filtrer
- Ajouter un contact dans la liste
- Modifier un contact existant
- Supprimer un contact
- Annuler la suppression
Model
Model | contact |
---|---|
nom string |
|
prenom string |
|
email string |
- Route/Model/actions
/contacts
Affiche la liste des contacts
Classe | Contacts |
---|---|
datas Tableau des contacts provenant du store |
|
contacts Liste filtrée des contacts non supprimés (* sur filtre et datas.@each.isDeleted) |
|
deleteds Liste des contacts supprimés |
|
deletedsCount Nombre de contacts supprimés |
|
Route handler | model() Retourne une instance de Contacts initialisée avec le datas des contacts provenant du store |
actions | delete(contact) Supprime le contact (sans sauvegarde dans le store) |
cancelDeletion(deleteds) Annule la suppression de tous les contacts supprimés |
/contacts/add
Affiche le formulaire d'ajout d'un contact
Route handler | model() Retourne l'instance de contact à modifier |
---|---|
actions | addContact(datas) Ajoute un nouveau contact dans le store |
/contacts/edit
Affiche le formulaire de modification d'un contact
Route handler | model() Retourne l'instance de contact à modifier |
---|---|
actions | updateContact(datas) Modifie le contact dans le store |
- Vues
- Interface
- Logique applicative / comportement de l'interface
- Zone filter : filtre l'ensemble des contacts affichés.
- Boutons :
- [x] : supprime le contact associé
- […] : affiche le formulaire de modification du contact
- Ajouter : affiche le formulaire d'ajout de contact
- Formulaire d'ajout/modification
- Le champ nom est obligatoire
- Le champ mail doit comporter une adresse email valide
- Le bouton Valider ajoute le contact à la liste des contacts et masque le formulaire
- Le bouton Annuler masque le formulaire