Librerie di terze parti con didInsertElement

È possibile inizializzare e collegare le librerie di terze parti all'elemento DOM utilizzando questo hook didInsertElement . Questo può essere chiamato quando l'elemento del componente è stato creato e inserito nel DOM e accessibile utilizzando il metodo s () .

Sintassi

import Ember from 'ember';

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

Esempio

L'esempio riportato di seguito descrive l'uso dell'hook didInsertElement durante l'integrazione con una libreria di terze parti. Crea un componente con il nome post-action , che verrà definito in app / components / .

Apri il file post-action.js e aggiungi il codice seguente:

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");
      });
   }
});

Ora apri il file modello del componente post-action.hbs con il codice seguente:

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

Apri il file index.hbs e aggiungi il codice seguente:

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

Produzione

Esegui il server ember; riceverai il seguente output -

Quando fai clic sul pulsante, verrà specificato l'effetto fade-in e fade-out sul testo -