Ceci est une ancienne révision du document !
Actions
L'ajout du helper {{action}} 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 :
1 2 3 4 |
<h3><button {{action "toggleBody"}}>{{title}}</button></h3>{{#if isShowingBody}} <p>{{{body}}}</p>{{/if}} |
Définition d'action
Implémentation de l'action correspondante dans la partie js du component :
1 2 3 4 5 6 7 8 9 |
import Component from '@ember/component';export default Component.extend({ actions: { toggleBody() { this.toggleProperty('isShowingBody'); } }}); |
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 {{action}} seront passés à la fonction correspondant à l'action (action handler).
Exemple :
L'argument post est passé à l'action select
<p><button {{action "select" post}}>✓</button> {{post.title}} |
La méthode select utilise l'argument post :
1 2 3 4 5 6 7 8 9 |
import Component from '@ember/component';export default Component.extend({ actions: { select(post) { console.log(post.get('title')); } }}); |
Spécification de l'évènement
Il est possible de préciser l'évènement déclencheur de l'action :
1 2 3 4 |
<p> <button {{action "select" post on="mouseUp"}}>✓</button> {{post.title}}</p> |
Binding en dehors des helpers
Il est d'utiliser mut pour éviter la création d'une action de modification de valeur :
1 2 3 4 5 |
<select onchange={{action (mut model.value) value="target.value"}}> {{#each model.values as |val|}} <option value="{{val.id}}">{{val.text}}</option> {{/each}}</select> |