EmberJS - Azioni

La classe helper {{action}} viene utilizzata per rendere l'elemento HTML selezionabile e l'azione verrà inoltrata all'applicazione quando l'utente fa clic su un evento.

Sintassi

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

Il codice precedente aggiunge il pulsante Fare clic all'applicazione in cui l'azione verrà inoltrata al metodo di azione specificato quando un utente fa clic sul pulsante.

La tabella seguente elenca gli eventi di azione delle azioni insieme alla loro descrizione:

S.No. Eventi e descrizione dell'azione
1 Parametri di azione

Gli argomenti possono essere passati a un gestore di azioni con l'aiuto dell'helper {{action}} .
2 Specificare il tipo di evento

L'evento alternativo può essere specificato sull'helper {{action}} utilizzando l'opzione on.
3 Consentire i tasti di modifica

Puoi consentire i tasti modificatori insieme all'helper {{action}} utilizzando l' opzione allowedKeys .
4 Modifica del primo parametro dell'azione

È possibile modificare il primo parametro dell'azione specificando un'opzione valore per l' helper {{action}} .

Esempio

L'esempio riportato di seguito mostra l'utilizzo dell'helper {{action}} per rendere selezionabile l'elemento HTML e l'azione verrà inoltrata al metodo di azione specificato. Crea un componente con il nome post-azione utilizzando il seguente comando:

ember g component post-action

Apri il file post-action.js creato in app / component / e aggiungi il seguente codice:

import Ember from 'ember';

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

Apri il file post-action.hbs creato in app / templates / con il seguente codice:

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

Nel file index.hbs , copia il codice seguente che viene creato in app / templates / -

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

Produzione

Esegui il server ember; riceverai il seguente output -

Quando fai clic sul pulsante Attiva / disattiva, verrà visualizzato il testo seguente dal file modello: