Implementación de acciones y diseño de componentes secundarios

Puede implementar la acción en el componente principal llamando a su método de acción especificado y crear una lógica en el componente secundario para el método de acción especificado.

Sintaxis

La acción se puede implementar como se indica a continuación:

import Ember from 'ember';

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

El componente hijo se puede implementar como en la siguiente línea de código:

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

Ejemplo

El ejemplo que se muestra a continuación especifica la implementación de la acción y el diseño de un componente secundario en su aplicación. Cree un componente con el nombre ember-actions y abra el archivo de plantilla de componente ember-actions.js creado en app / components / con el siguiente código:

import Ember from 'ember';

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

Abra el archivo ember-actions.hbs creado en app / templates / components / e ingrese el siguiente 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}}

Cree el archivo application.hbs y agregue el siguiente código:

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

Salida

Ejecute el servidor ember; recibirá el siguiente resultado:

Cuando hace clic en el botón 'Mostrar', mostrará el texto y lo ocultará al hacer clic en el botón 'Ocultar' -