Différences

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

--- richclient:emberjs:components [2018/01/26 11:17] – [Personnalisation de la classe css] jcheron
+++ richclient:emberjs:components [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 198: / Ligne 198: @@
 });
 </sxh>
+==== Personnalisation des attributs HTML ====
+La propriété **attributeBindings** permet de définir les attributs du DOM associés au HTML généré :
+<sxh javascript>
+import Component from '@ember/component';
+export default Component.extend({
+  tagName: 'a',
+  attributeBindings: ['href'],
+  href: 'http://emberjs.com'
+});
+</sxh>
+Il est possible de définir **attributeBindings** à partir d'une propriété du composant :
+<sxh javascript>
+import Component from '@ember/component';
+export default Component.extend({
+  tagName: 'a',
+  attributeBindings: ['customHref:href'],
+  customHref: 'http://emberjs.com'
+});
+</sxh>
+===== Gestion des événements =====
+<sxh html;title:app/templates/components/double-clickable.hbs>
+{{#double-clickable}}
+  This is a double clickable area!
+{{/double-clickable}}
+</sxh>
+Ajout de la prise en charge de l'événement double click avec le hook **doubleClick** :
+<sxh javascript;title:app/components/double-clickable.js>
+import Component from '@ember/component';
+export default Component.extend({
+  doubleClick() {
+    alert("DoubleClickableComponent was clicked!");
+  }
+});
+</sxh>
+Pour autoriser la propagation de l'événement sur les parents DOM du composant, la méthode évènementielle peut retourner **true**.
+<sxh javascript;title:app/components/double-clickable.js>
+import Component from '@ember/component';
+export default Component.extend({
+  doubleClick() {
+    alert("DoubleClickableComponent was clicked!");
+    return true;
+  }
+});
+</sxh>
+Voir la liste des [[https://guides.emberjs.com/v2.18.0/components/handling-events/#toc_event-names|events hook]] possibles
+===== Actions =====
+Création d'un composant appelant l'action définie dans la route active :
+Générer le composant :
+<sxh bash;gutter:false>
+ember generate component action-button
+</sxh>
+Implémenter le template du composant **action-button** :
+<sxh html;title:app/templates/components/action-button.hbs>
+<button {{action "doButtonThing"}} class="btn btn-default">{{yield}}</button>
+</sxh>
+Le template invoque l'action **doButtonThing** du composant qu'il va falloir créer dans le fichier **action-button.js** :
+<sxh javascript;title:app/components/action-button.js>
+import Ember from 'ember';
+export default Ember.Component.extend({
+  actions: {
+    doButtonThing() {
+      this.sendAction('actionToCall');
+    }
+  }
+});
+</sxh>
+Le composant peut maintenant être utilisé dans une route /test :
+<sxh html;title:app/templates/test.hbs>
+{{#action-button actionToCall="continue"}}Continuer vers test/new{{/action-button}}
+</sxh>
+l'attribut **actionToCall** fait référence à l'action **continue** qu'il nous faut maintenant ajouter dans le route handler  :
+<sxh javascript;title:app/routes/test.js>
+import Route from '@ember/routing/route';
+export default Route.extend({
+actions: {
+  continue() {
+    console.log("continuing on test/new page");
+    this.replaceWith('test.new');
+  }
+}
+});
+</sxh>