Bibliothèques tierces avec didInsertElement

Vous pouvez initialiser et attacher les bibliothèques tierces à l'élément DOM à l'aide de ce hook didInsertElement . Cela peut être appelé lorsque l'élément du composant a été créé et inséré dans DOM et accessible en utilisant la méthode s () .

Syntaxe

import Ember from 'ember';

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

Exemple

L'exemple ci-dessous décrit l'utilisation du hook didInsertElement lors de l'intégration avec une bibliothèque tierce. 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';
var inject = Ember.inject;

export default Ember.Component.extend ({
   age: 'Tutorialspoint',
   actions: {
      pressed: function () {
         this.$("#test").fadeIn("slow");
      }
   },
   
   didInsertElement: function () {
      Ember.run.scheduleOnce('afterRender', this, function () {
         this.$("#test").fadeOut("slow");
      });
   }
});

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

<div id = "test">This is {{age}}</div>  
<button {{action "pressed"}}>
   Press Me  
</button>
{{yield}}

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

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

Production

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

Lorsque vous cliquez sur le bouton, il spécifiera l'effet de fondu en entrée et en sortie de fondu sur le texte -