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'));
    }
  }
});