TD n°1

1. Créer un dossier ember-tds ;
2. Publier ember-tds sur github en tant que nouveau repository ;
3. Ajouter jcheron à la liste des colaborators de ce projet ;
4. Publier (commit and push) régulièrement sur github.

Créer le projet ember td1

1. Créer un projet
2. Créer des routes
3. Créer/manipuler les templates
4. Créer des classes et instancier des objets
5. Mettre en oeuvre le Data-binding avec computed properties

1. Saisir une note (message textuel) et afficher le nombre de caractères restants (le message est limité à 100 caractères saisis)
2. Enregistrer (pseudo enregistrement)
3. Effacer le contenu
4. Afficher les messages d'info (sauvegarde, modification…)
5. Gérer les changements de classe CSS sur l'affichage d'info

Fichier app/routes/ex1.js

ember g route ex1

Fichier app/controllers/ex1.js

ember g controller ex1

(*) computed property

• {{expression}} voir expressions
• {{textarea ...}} voir textarea
• {{action...}} voir actions

• sur saisie dans la zone messageNote (textarea), le nombre de caractères restants est indiqué dans la zone status
  • la zone info apparaît et indique “note modifiée” dès que messageNote est modifié
  • Le style de la zone status passe à <fc orange>alert-warning</fc> si le nombre de caractères restant est inférieur à 50, et à <fc red>alert-danger</fc> s'il est inférieur à 20

• Sur enregistrement (à condition que le message ne soit pas vide) :
  • la zone info affiche “note sauvegardée” et sont style passe à <fc #008000>alert-success</fc>

• Sur effacement (à condition que le message ne soit pas vide) :
  • la zone info disparaît

Tester l'appli Note

1. Créer des routes avec model
2. Utiliser/créer des helpers handlebar
3. Mettre en oeuvre le Data-binding
4. Utiliser les tableaux

1. Sélectionner/désélectionner des services
2. Calculer le montant dû
3. Afficher le nombre de services sélectionnés

Fichier app/route/ex2.js

ember g route ex2

Fichier app/controllers/ex2.js

ember g controller ex2

(*) computed properties

• filterBy pour filtrer les services en fonction de leur propriété active
• forEach pour le parcours des services

Services : à passer en paramètre de l'instance de la classe Services

Services.create({services: ... });

[
	{
		"name": "Web Development",
		"price": 300,
		"active":true
	},{
		"name": "Design",
		"price": 400,
		"active":false
	},{
		"name": "Integration",
		"price": 250,
		"active":false
	},{
		"name": "Formation",
		"price": 220,
		"active":false
	}
]

• Expressions {{expression}}
• {{#each}}{{/each}}
• {{#if}}{{/if}}
• {{input}}

• Le service Web development est sélectionné par défaut
• La classe css d'un service sélectionné est égale à active
• La sélection/dé-sélection met à jour l'affichage du nombre de services sélectionnés, ainsi que le total

• La saisie d'un code promo permet d'appliquer un taux de réduction au montant total (si la case est cochée et le code valide)
• La liste des codes est fournie en JS, elle sera a ajouter au model hook

{
  "B22":0.05,
  "AZ":0.01,
  "UBOAT":0.02
}

Tester l'appli Services