Mise en œuvre de l'action et conception du composant enfant

Vous pouvez implémenter l'action sur le composant parent en appelant sa méthode d'action spécifiée et créer une logique dans le composant enfant pour la méthode d'action spécifiée.

Syntaxe

L'action peut être mise en œuvre comme indiqué ci-dessous -

import Ember from 'ember';

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

Le composant enfant peut être implémenté comme dans la ligne de code suivante -

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

Exemple

L'exemple ci-dessous spécifie la mise en œuvre de l'action et la conception du composant enfant dans votre application. Créez un composant avec le nom ember-actions et ouvrez le fichier de modèle de composant ember-actions.js créé sous app / components / avec le code suivant -

import Ember from 'ember';

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

Ouvrez le fichier ember-actions.hbs créé sous app / templates / components / et entrez le code suivant -

<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}}

Créez le fichier application.hbs et ajoutez le code suivant -

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

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Lorsque vous cliquez sur le bouton 'Afficher', il affichera le texte et masquera le texte en cliquant sur le bouton 'Masquer' -