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

