Différences

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

--- richclient:emberjs:templates:actions [2018/01/23 01:53] – créée jcheron
+++ richclient:emberjs:templates:actions [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 3: / Ligne 3: @@
 L'ajout du helper <nowiki>{{action}}</nowiki> déclenche, sur intervention de l'utilisateur, l'action déclarée dans le composant associé au template (component, controller ou route).
+===== Appel d'action =====
+Appel d'une action dans le template d'un component :
+<sxh html;title:app/templates/components/single-post.hbs>
+<h3><button {{action "toggleBody"}}>{{title}}</button></h3>
+{{#if isShowingBody}}
+  <p>{{{body}}}</p>
+{{/if}}
+</sxh>
+===== Définition d'action =====
+Implémentation de l'action correspondante dans la partie js du component :
+<sxh javascript;title:app/components/single-post.js>
+import Component from '@ember/component';
+export default Component.extend({
+  actions: {
+    toggleBody() {
+      this.toggleProperty('isShowingBody');
+    }
+  }
+});
+</sxh>
+===== Paramètre d'action =====
+Il est possible de passer des arguments à une action. Tous les arguments situés après le nom de l'action dans l'appel du helper <nowiki>{{action}}</nowiki> seront passés à la fonction correspondant à l'action (action handler).
+__Exemple :__
+L'argument **post** est passé à l'action **select**
+<sxh html;gutter:false>
+<p><button {{action "select" post}}>✓</button> {{post.title}}
+</sxh>
+La méthode **select** utilise l'argument **post** :
+<sxh javascript;title:app/components/single-post.js>
+import Component from '@ember/component';
+export default Component.extend({
+  actions: {
+    select(post) {
+      console.log(post.get('title'));
+    }
+  }
+});
+</sxh>
+===== Spécification de l'évènement =====
+Il est possible de préciser l'évènement déclencheur de l'action :
+<sxh html>
+<p>
+  <button {{action "select" post on="mouseUp"}}>✓</button>
+  {{post.title}}
+</p>
+</sxh>
+===== Binding en dehors des helpers =====
+Il est possible d'utiliser **mut** pour éviter la création d'une action de modification de valeur :
+<sxh javascript>
+<select onchange={{action (mut model.value) value="target.value"}}>
+        {{#each model.values as |val|}}
+          <option value="{{val.id}}">{{val.text}}</option>
+        {{/each}}
+</select>
+</sxh>