Ceci est une ancienne révision du document !


TD n°3

Tous les exercices utilisent Bootstrap pour la partie CSS.
 ember install ember-bootstrap 
pour les fonts :
ember install ember-font-awesome

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

0.1. Objectifs

  1. Models et Store
  2. Computed properties
  3. Création de composants

0.2. Fonctionnalités

  1. Obtenir la liste des contacts et la filtrer
  2. Ajouter un contact dans la liste
  3. Modifier un contact existant
  4. Supprimer un contact
  5. Annuler la suppression

Model

Model contact
nom
string
prenom
string
email
string

0.3. 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

0.4. Vues

0.4.1. Interface

0.4.2. 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
richclient/emberjs/td3.1551224353.txt.gz · Dernière modification: 2019/02/27 00:39 par jcheron
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0