Table des matières

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

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

- 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

- 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

Tester l'appli Gestion de contacts

- Logique applicative / comportement de l'interface