EmberJS - Ações

A classe auxiliar {{action}} é usada para tornar o elemento HTML clicável e a ação será enviada ao aplicativo quando o usuário clicar em um evento.

Sintaxe

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

O código acima adiciona o Clique do botão ao seu aplicativo, no qual a ação será encaminhada ao método de ação especificado quando um usuário clicar no botão.

A tabela a seguir lista os eventos de ação das ações junto com sua descrição -

S.No.	Eventos de ação e descrição
1	Parâmetros de Ação Os argumentos podem ser passados para um manipulador de ação com a ajuda do helper {{action}} .
2	Especificando o tipo de evento O evento alternativo pode ser especificado no helper {{action}} usando a opção on.
3	Permitindo Teclas Modificadoras Você pode permitir teclas modificadoras junto com o auxiliar {{action}} usando a opção allowedKeys .
4	Modificando o primeiro parâmetro da ação Você pode modificar o primeiro parâmetro da ação especificando uma opção de valor para o auxiliar {{action}} .

Exemplo

O exemplo dado abaixo mostra o uso do auxiliar {{action}} para tornar o elemento HTML clicável e a ação será encaminhada para o método de ação especificado. Crie um componente com o nome pós-ação usando o seguinte comando -

ember g component post-action

Abra o arquivo post-action.js criado em app / component / e adicione o seguinte código -

import Ember from 'ember';

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

Abra o arquivo post-action.hbs criado em app / templates / com o seguinte código -

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

No arquivo index.hbs , copie o código abaixo que é criado em app / templates / -

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

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Quando você clica no botão Alternar , ele exibe o seguinte texto do arquivo de modelo -

↰ Previous page