Implementando Ação e Projetando o Componente Filho

Você pode implementar a ação no componente pai chamando seu método de ação especificado e criar uma lógica no componente filho para o método de ação especificado.

Sintaxe

A ação pode ser implementada conforme a seguir -

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //code here
      }
   }
});

O componente filho pode ser implementado como na seguinte linha de código -

<tag_name {{action "action_name"}}>{{Text Here}}</end_of_tag>

Exemplo

O exemplo fornecido a seguir especifica a implementação da ação e o design do componente filho em seu aplicativo. Crie um componente com o nome ember-actions e abra o arquivo de modelo de componente ember-actions.js criado em app / components / com o seguinte código -

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.decrementProperty('isShowingBody');
      },
      cancelBody() {
         this.incrementProperty('isShowingBody');
      }
   }
});

Abra o arquivo ember-actions.hbs criado em app / templates / components / e digite o seguinte código -

<button {{action "toggleBody"}}>{{title}}Show (Display Text)</button>
{{#if isShowingBody }}
   <h2>Welcome to Tutorialspoint...</h2>
{{/if}}
<button class="confirm-cancel" {{action "cancelBody"}}>{{title}}Hide (Hides Text)
</button>
{{yield}}

Crie o arquivo application.hbs e adicione o seguinte código -

{{ember-actions}}
{{outlet}}

Resultado

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

Quando você clica no botão 'Mostrar', ele exibe o texto e oculta o texto ao clicar no botão 'Ocultar' -