EmberJS - Actions

La classe d'assistance {{action}} est utilisée pour rendre l'élément HTML cliquable et l'action sera transmise à l'application lorsque l'utilisateur clique sur un événement.

Syntaxe

<button {{action 'action-name'}}>Click</button>

Le code ci-dessus ajoute le bouton Cliquer à votre application dans laquelle l'action sera transmise à la méthode d'action spécifiée lorsqu'un utilisateur clique sur le bouton.

Le tableau suivant répertorie les événements d'action des actions avec leur description -

S.No.	Événements d'action et description
1	Paramètres d'action Les arguments peuvent être passés à un gestionnaire d'actions à l'aide de {{action}} helper.
2	Spécification du type d'événement L'événement alternatif peut être spécifié sur {{action}} helper en utilisant l'option on.
3	Autoriser les touches de modification Vous pouvez autoriser les touches de modification avec l'aide {{action}} en utilisant l' option allowedKeys .
4	Modification du premier paramètre de l'action Vous pouvez modifier le premier paramètre de l'action en spécifiant une option de valeur pour l' assistant {{action}} .

Exemple

L'exemple ci-dessous montre l'utilisation de l' aide {{action}} pour rendre l'élément HTML cliquable et l'action sera transmise à la méthode d'action spécifiée. Créez un composant avec le nom post-action à l'aide de la commande suivante -

ember g component post-action

Ouvrez le fichier post-action.js créé sous app / component / et ajoutez le code suivant -

import Ember from 'ember';

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

Ouvrez le fichier fichier post-action.hbs créé sous app / templates / avec le code suivant -

<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3>
{{#if isShowingBody}}
   <h2>Welcome To Tutorials Point</h2>
{{/if}}
{{yield}}

Dans le fichier index.hbs , copiez le code ci-dessous qui est créé sous app / templates / -

{{post-action}}
{{outlet}}

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Lorsque vous cliquez sur le bouton Basculer , il affichera le texte suivant du fichier modèle -