EmberJS - Acciones

La clase auxiliar {{action}} se utiliza para hacer que se pueda hacer clic en el elemento HTML y la acción se reenviará a la aplicación cuando el usuario haga clic en un evento.

Sintaxis

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

El código anterior agrega el botón Click a su aplicación en la que la acción se reenviará al método de acción especificado cuando un usuario haga clic en el botón.

La siguiente tabla enumera los eventos de acción de las acciones junto con su descripción:

S.No.	Eventos de acción y descripción
1	Parámetros de acción Los argumentos se pueden pasar a un controlador de acciones con la ayuda del ayudante {{action}} .
2	Especificando el tipo de evento El evento alternativo se puede especificar en {{action}} helper usando la opción on.
3	Permitir claves modificadoras Puede permitir teclas modificadoras junto con el asistente {{action}} usando la opción allowedKeys .
4	Modificar el primer parámetro de la acción Puede modificar el primer parámetro de la acción especificando una opción de valor para el ayudante {{action}} .

Ejemplo

El ejemplo que se proporciona a continuación muestra el uso del asistente {{action}} para hacer que se pueda hacer clic en el elemento HTML y la acción se reenviará al método de acción especificado. Cree un componente con el nombre de la acción posterior mediante el siguiente comando:

ember g component post-action

Abra el archivo post-action.js creado en app / component / y agregue el siguiente código:

import Ember from 'ember';

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

Abra el archivo post-action.hbs creado en app / templates / con el siguiente código:

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

En el archivo index.hbs , copie el siguiente código que se crea en app / templates / -

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

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Al hacer clic en el botón Alternar , se mostrará el siguiente texto del archivo de plantilla:

↰ Previous page