richclient:emberjs:components [SlamWiki 2.1]

Lien vers cette vue comparative

--- richclient:emberjs:components [2018/01/28 13:07] – [Actions] 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 261: / Ligne 261: @@
 Voir la liste des [[https://guides.emberjs.com/v2.18.0/components/handling-events/#toc_event-names|events hook]] possibles
-==== Actions ====
+===== Actions =====
-Création d'un composant appelant l'action définie dans la route sollicitée :
+Création d'un composant appelant l'action définie dans la route active :
 Générer le composant :
@@ Ligne 272: / Ligne 272: @@
-Implémenter le template du composant action-button :
+Implémenter le template du composant **action-button** :
 <sxh html;title:app/templates/components/action-button.hbs>
-<button {{action "doButtonThing"}} class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">{{yield}}</button>
+<button {{action "doButtonThing"}} class="btn btn-default">{{yield}}</button>
 </sxh>
@@ Ligne 293: / Ligne 293: @@
+Le composant peut maintenant être utilisé dans une route /test :
-ajouter une action (celle qui sera associée au composant) dans le route handler qui fera appel au composant :
+<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>