Différences

Ci-dessous, les différences entre deux révisions de la page.

--- richclient:emberjs:td2 [2018/02/14 11:36] – [1.4- Classes/Routes] jcheron
+++ richclient:emberjs:td2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 4: / Ligne 4: @@
 |< 100% >|
 | {{::ember.png?150|}} | Tous les exercices utilisent [[https://getbootstrap.com|Bootstrap]] pour la partie CSS. <sxh bash;gutter:false> ember install ember-bootstrap </sxh> |
-| ::: | Pour passer à la v4 de bootstrap (sass requis) : <sxh bash;gutter:false> npm install --save-dev ember-cli-sass
-ember generate ember-bootstrap --bootstrap-version=4</sxh> |
 | ::: | pour les fonts : <sxh bash;gutter:false>ember install ember-font-awesome</sxh> |
 <html></div></html>
@@ Ligne 17: / Ligne 15: @@
 Créer le projet **td2**
-===== -- Exercice : choix multiples =====
+===== - Exercice : choix multiples =====
-==== -- Objectifs ====
+==== - Objectifs ====
   - Création de Computed properties
   - Manipulation de Tableaux d'objets
   - Création de helper et de component
-==== -- Fonctionnalités ====
+==== - Fonctionnalités ====
   - Lister les produits disponibles
   - Ajouter un ou plusieurs produits disponibles aux produits sélectionnés
@@ Ligne 33: / Ligne 31: @@
-==== -- Helper/component ====
+==== - Helper/component ====
 Création d'un composant permettant d'afficher une liste HTML composée d'un tableau d'éléments :
@@ Ligne 48: / Ligne 46: @@
 export function arrayContains(params) {
   const [items, value] = params;
-  return items.indexOf(value) > -1;
+  return items.includes(value);
 }
@@ Ligne 60: / Ligne 58: @@
 </sxh>
-<wrap info>Composant modifié le 13/02/2018 18h00</wrap>
+<wrap info>Composant modifié le 12/02/2019 16h53</wrap>
 <sxh javascript;title:app/components/multi-select.js>
 import Component from '@ember/component';
-import Ember from 'ember';
+import { computed } from '@ember/object';
+import $ from 'jquery'
 export default Component.extend({
@@ Ligne 73: / Ligne 72: @@
   multiple: true,
   size: 10,
-  selectedElements: Ember.computed('selectedIds.[]', function() {
+  selectedElements: computed('selectedIds.[]', function() {
     return this.get('selectedIds').map((id) => {
       return this.get('elements').findBy('id', id);
@@ Ligne 79: / Ligne 78: @@
   }),
   change(event){
-    const selectedIds = Ember.$(event.target).val();
+    const selectedIds = $(event.target).val();
     this.set('selectedIds', selectedIds || []);
   },
   doubleClick(event){
-      const selected = Ember.$(event.target).val();
+      const selected = $(event.target).val();
       this.sendAction('dblClick',selected,this.get('id'));
   }
@@ Ligne 96: / Ligne 95: @@
 </sxh>
-==== -- Classes/Routes ====
+==== - Classes/Routes ====
 |< 100% >|
@@ Ligne 166: / Ligne 165: @@
 	]
 </sxh>
-==== -- Vues ====
+==== - Vues ====
-=== -- Interface ===
+=== - Interface ===
 **ex1/step1 :**\\
@@ Ligne 175: / Ligne 174: @@
 {{:slam4:richclient:angularjs:td1-ex3-2.png?700&nolink|}}
-=== -- Logique applicative / comportement de l'interface ===
+=== - Logique applicative / comportement de l'interface ===
   * Les 4 boutons d'ajout ou de retrait des services à inclure s'activent ou se désactive (disabled) en fonction du contenu des listes et/ou des éléments sélectionnés
@@ Ligne 189: / Ligne 188: @@
     * le bouton "Passer à l'étape suivante" affiche la vue suivante (en passant step à 2)
     * la vue affiche la liste des éléments ajoutés dans les éléments à inclure
+==== Tests ====
+Réalisez des tests d'[[https://guides.emberjs.com/release/testing/acceptance/|acceptance]] pour votre application.