Différences

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

--- richclient:emberjs:templates:actions [2018/01/23 02:05] – jcheron
+++ richclient:emberjs:templates:actions [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 30: / Ligne 30: @@
 </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>