Bibliotecas de terceros con didInsertElement

Puede inicializar y adjuntar las bibliotecas de terceros en el elemento DOM utilizando este gancho didInsertElement . Esto se puede llamar cuando el elemento del componente ha sido creado e insertado en DOM y accesible mediante el método s () .

Sintaxis

import Ember from 'ember';

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

Ejemplo

El ejemplo que se muestra a continuación describe el uso del gancho didInsertElement cuando se integra con una biblioteca de terceros. Cree un componente con el nombre post-action , que se definirá en app / components / .

Abra el archivo post-action.js y agregue el siguiente código:

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

Ahora abra el archivo de plantilla de componente post-action.hbs con el siguiente código:

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

Abra el archivo index.hbs y agregue el siguiente código:

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

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Al hacer clic en el botón, se especificará el efecto fadeIn y fadeOut en el texto: