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'une action dans le template d'un component :

<h3><button {{action "toggleBody"}}>{{title}}</button></h3>
{{#if isShowingBody}}
  <p>{{{body}}}</p>
{{/if}}

Implémentation de l'action correspondante dans la partie js du component :

import Component from '@ember/component';

export default Component.extend({
  actions: {
    toggleBody() {
      this.toggleProperty('isShowingBody');
    }
  }
});

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 :

import Component from '@ember/component';

export default Component.extend({
  actions: {
    select(post) {
      console.log(post.get('title'));
    }
  }
});

Il est possible de préciser l'évènement déclencheur de l'action :

<p>
  <button {{action "select" post on="mouseUp"}}>✓</button>
  {{post.title}}
</p>

Il est possible d'utiliser mut pour éviter la création d'une action de modification de valeur :

<select onchange={{action (mut model.value) value="target.value"}}>
        {{#each model.values as |val|}}
          <option value="{{val.id}}">{{val.text}}</option>
        {{/each}}
</select>