Différences

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

--- richclient:emberjs:components [2018/01/26 12:56] – [Gestion des événements] jcheron
+++ richclient:emberjs:components [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 225: / Ligne 225: @@
 </sxh>
-==== Gestion des événements ====
+===== Gestion des événements =====
@@ Ligne 247: / Ligne 247: @@
-Pour autoriser la propagation de l'événement sur ses parent, la méthode évènementielle peut retourner **true**.
+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';
@@ Ligne 259: / Ligne 259: @@
 </sxh>
-==== Actions ====
+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>