Détacher et démolir avec willDestroyElement

Vous pouvez supprimer les éléments du composant du DOM en déclenchant le hook willDestroyElement .

Syntaxe

import Ember from 'ember';

export default Ember.Component.extend ({
   ...
   willDestroyElement() {
      //code here    
   },
   ...
})

Exemple

L'exemple ci-dessous décrit l'utilisation du hook willDestroyElement , qui supprime les éléments composants du DOM. Créez un contrôleur avec un index de nom et ouvrez le fichier depuis app / controller / pour ajouter le code suivant -

import Ember from 'ember';

export default Ember.Controller.extend ({
   showComponent: true,
   laterCount: 0,
  
   buttonText: Ember.computed('showComponent', function() {
      let showing = Ember.get(this, 'showComponent');
      if (showing) {
         return 'Remove';
      } else {
         return 'Add';
      }
   }),
  
   actions: {
      toggleComponent() {
         this.toggleProperty('showComponent');
      },
    
      updateLaterCount() {
         Ember.set(this, 'laterCount', Ember.get(this, 'laterCount') + 1);
      }
   }
});

Créez un composant avec le nom post-action , qui sera défini sous app / components / .

Ouvrez le fichier post-action.js et ajoutez le code suivant -

import Ember from 'ember';

export default Ember.Component.extend ({
   runLater: null,
  
   didInsertElement() {
      let timeout = Ember.run.later(this, function() {
         Ember.Logger.log('fired this after 1 seconds...');
         this.sendAction();
      }, 500);
    
      Ember.set(this, 'runLater', timeout);
   },
  
   willDestroyElement() {
      Ember.run.cancel(Ember.get(this, 'runLater'));
   }
});

Ouvrez maintenant le fichier de modèle de composant post-action.hbs avec le code suivant -

<h2>Tutorialspoint</h2>

Ouvrez le fichier index.hbs et ajoutez le code suivant -

<h5>Count for clicks: {{laterCount}}</h5>
<button {{action 'toggleComponent'}}>{{buttonText}}</button>
{{#if showComponent}}
   {{post-action action="updateLaterCount"}}
{{/if}}
{{outlet}}

Production

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

Au départ, le nombre de clics sera de 1. Lorsque vous cliquez sur le bouton Supprimer , le texte sera supprimé -

Ensuite, cliquez sur le bouton Ajouter , cela incrémentera le nombre de clics et affichera le texte -