Bibliotecas de terceiros com didInsertElement

Você pode inicializar e anexar as bibliotecas de terceiros ao elemento DOM usando este gancho didInsertElement . Isso pode ser chamado quando o elemento do componente foi criado e inserido no DOM e acessível usando o método s () .

Sintaxe

import Ember from 'ember';

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

Exemplo

O exemplo fornecido a seguir descreve o uso do gancho didInsertElement ao integrar com uma biblioteca de terceiros. Crie um componente com o nome pós-ação , que será definido em app / components / .

Abra o arquivo post-action.js e adicione o seguinte 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");
      });
   }
});

Agora abra o arquivo de modelo de componente post-action.hbs com o seguinte código -

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

Abra o arquivo index.hbs e adicione o seguinte código -

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

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Quando você clica no botão, ele especifica o efeito fadeIn e fadeOut no texto -