Usando Ember.js, como executo algum JS após a renderização de uma visualização?

Question

Como executo uma função depois que um Ember View é inserido no DOM?

Aqui está meu caso de uso:Eu gostaria de usar o jQuery UI classificável para permitir a classificação.

Answer 1

Você precisa substituir didInsertElement, pois é "Chamado quando o elemento da visualização foi inserido no DOM. Substitua esta função para fazer qualquer configuração que requeira um elemento no corpo do documento."

Dentro do retorno de chamada didInsertElement, você pode usar this.$() para obter um objeto jQuery para o elemento da visualização.

Referência: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Answer 2

Você também pode usar o método afterRender

didInsertElement: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
     //Put your code here what you want to do after render of a view
    });
}

Answer 3

Brasa 2.x:A visualização está obsoleta, use o componente em vez disso

Você precisa entender o ciclo de vida do componente para saber quando certas coisas acontecem.

À medida que os componentes são renderizados, renderizados novamente e finalmente removidos, o Ember fornece ganchos de ciclo de vida que permitem executar código em momentos específicos da vida de um componente.

https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

Geralmente, didInsertElement é um ótimo lugar para integração com bibliotecas de terceiros.

Este gancho garante duas (2) coisas,

1. O elemento do componente foi criado e inserido no DOM.
2. O elemento do componente é acessível através do componente $() método.

Você precisa que o JavaScript seja executado sempre que os atributos mudarem

Execute seu código dentro didRender gancho.

Mais uma vez, leia a documentação do ciclo de vida acima para obter mais informações

Answer 4

Começando com Ember 3.13 , você podeuse componentes que herdam do Glimmer, e este exemplo abaixo mostra como isso poderia ser:

import Component from '@glimmer/component';
import { action } from '@ember/object';

/* global jQuery */

export default class MyOctaneComponent extends Component {
  @action configureSorting(element) {
    jQuery(element).sortable();
  }
}

<div {{did-insert this.configureSorting}}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

Esses componentes de estilo de visualização não têm ganchos de ciclo de vida diretamente; em vez disso, você pode usar render-modificadores para anexar uma função.Introdução não oficial aos modificadores pode ser encontrada aqui

A vantagem disso é que fica mais claro quais são e se tornarão as responsabilidades do modelo.

Aqui está uma caixa de códigos executáveis se você quiser brincar com isso: https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

Você precisa disparar o que quiser no retorno de chamada didInsertElement em sua Visualização:

MyEmberApp.PostsIndexView = Ember.View.extend({

  didInsertElement: function(){
    // 'this' refers to the view's template element.
    this.$('table.has-datatable').DataTable();
  }

});