Différences

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

--- richclient:emberjs:td2 [2018/02/13 01:02] – [1.3- Helper/component] 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 ====
-  - Model objet
+  - Création de Computed properties
-  - Computed properties
+  - Manipulation de Tableaux d'objets
-  - 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 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 72: / 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 78: / Ligne 78: @@
   }),
   change(event){
-    const selectedIds = Ember.$(event.target).val();
+    const selectedIds = $(event.target).val();
     this.set('selectedIds', selectedIds || []);
   },
-  doubleClick(){
+  doubleClick(event){
-    let dblClick=this.get('dblClick');
+      const selected = $(event.target).val();
-    if(dblClick)
+      this.sendAction('dblClick',selected,this.get('id'));
-      this.sendAction(dblClick);
   }
 });
@@ Ligne 90: / Ligne 89: @@
 Template :
-<sxh javascript;title:app/templates/components/multi-select.hbs>
+<sxh html;title:app/templates/components/multi-select.hbs>
   {{#each elements as |elm|}}
     <option value={{elm.id}} selected={{array-contains selectedIds elm.id}}>{{elm.title}}</option>
@@ Ligne 96: / Ligne 95: @@
 </sxh>
-==== -- Classes/Routes ====
+==== - Classes/Routes ====
 |< 100% >|
 ^**Classe** | **Listes** |
-^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles|
+^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles (Liste 1)|
-^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure |
+^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure (Liste 2)|
-^::: | <html><span class="variable">selectedDispoItemsIds</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits disponibles |
+^::: | <html><span class="variable">dispoItemsIds_</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits disponibles |
-^::: | <html><span class="variable">selectedIncludedItemsIds</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure |
+^::: | <html><span class="variable">includedItemsIds_</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure |
-^::: | <html><span class="variable">selectedDispoItems*</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles (* sur selectedDispoItemsIds.[])|
+^::: | <html><span class="variable">dispoItems_*</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles (* sur dispoItemsIds_.[])|
-^::: | <html><span class="variable">selectedIncludedItems*</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure (* sur selectedIncludedItemsIds.[])|
+^::: | <html><span class="variable">includedItems_*</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure (* sur includedItemsIds_.[])|
-^**actions** | <html><span class="method">addToIncluded()</span></html>\\ Ajoute les produits disponibles en surbrillance (**selectedDispoItems**) à la liste des produits à inclure (**includedItems**)  |
+^**actions** | <html><span class="method">addToIncluded()</span></html>\\ Ajoute les produits disponibles en surbrillance (**dispoItems_**) à la liste des produits à inclure (**includedItems**)  |
 ^::: | <html><span class="method">addAllToIncluded()</span></html>\\ Ajoute tous les produits disponibles (**dispoItems**) à la liste des produits à inclure (**includedItems**)  |
-^::: | <html><span class="method">removeFromIncluded()</span></html>\\ Retire les produits sélectionnés en surbrillance (**selectedIncludedItems**) pour les remettre dans la liste des produits disponibles (**items**)  |
+^::: | <html><span class="method">removeFromIncluded()</span></html>\\ Retire les produits sélectionnés en surbrillance (**includedItems_**) pour les remettre dans la liste des produits disponibles (**items**)  |
-^::: | <html><span class="method">RemoveAllFromIncluded()</span></html>\\ Retire tous les produits à inclure (**includedItems**) pour les remettre dans la liste des produits disponibles (**items**)  |
+^::: | <html><span class="method">RemoveAllFromIncluded()</span></html>\\ Retire tous les produits à inclure (**includedItems**) pour les remettre dans la liste des produits disponibles (**dispoItems**)  |
+Remarque :
+Il est possible de factoriser les actions en ajoutant uniquement une action dont le prototype est le suivant :
+<sxh javascript>
+addTo:function(source,destination,items){...}
+</sxh>
+Il faudra dans ce cas passer les paramètres nécessaires à l'action **addTo** dans le template.
 **dispoItems** : à intégrer au model hook
@@ Ligne 159: / Ligne 165: @@
 	]
 </sxh>
-==== -- Vues ====
+==== - Vues ====
-=== -- Interface ===
+=== - Interface ===
-**ex1/step/1 :**\\
+**ex1/step1 :**\\
 {{:slam4:richclient:angularjs:td1-ex3.png?700&nolink|}}
-**ex1/step/2 :**\\
+**ex1/step2 :**\\
 {{: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 182: / 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.