Usando Ember.js, ¿cómo ejecuto algo de JS después de renderizar una vista?

Question

¿Cómo ejecuto una función después de insertar una vista Ember en el DOM?

Este es mi caso de uso: me gustaría usar jQuery UI ordenable para permitir la ordenación.

Answer 1

Debe anular didInsertElement ya que "se llama cuando el elemento de la vista se ha insertado en el DOM. Anule esta función para realizar cualquier configuración que requiera un elemento en el cuerpo del documento".

Dentro de la devolución de llamada didInsertElement, puede usar this.$() para obtener un objeto jQuery para el elemento de la vista.

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

Answer 2

También puede usar el método del postrender

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

Answer 3

Ember 2.x: la vista está obsoleta, utilice el componente en su lugar

Debe comprender el ciclo de vida del componente para saber cuándo suceden ciertas cosas.

A medida que los componentes se renderizan, se vuelven a renderizar y finalmente se eliminan, Ember proporciona enlaces de ciclo de vida que le permiten ejecutar código en momentos específicos de la vida de un componente.

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

Generalmente, didInsertElement es un gran lugar para integrarse con bibliotecas de terceros.

Este gancho garantiza dos (2) cosas

1. El elemento del componente se ha creado e insertado en el DOM.
2. Se puede acceder al elemento del componente mediante el método $() del componente.

Necesita que JavaScript se ejecute siempre que cambien los atributos

Ejecute su código dentro del gancho didRender.

Una vez más, lea la documentación del ciclo de vida anterior para obtener más información.

Answer 4

A partir de Ember 3.13 , puedeuse componentes que hereden de Glimmer, y este ejemplo a continuación muestra cómo podría verse:

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>

Estos componentes de estilo de vista no tienen enlaces de ciclo de vida directamente, en su lugar, puede usar render-modificadores para adjuntar una función.La introducción no oficial a los modificadores se puede encontrar aquí

El beneficio de esto es que es más claro cuáles son y cuáles son las responsabilidades de la plantilla.

Aquí hay un cuadro de códigos ejecutables si quieres jugar con esto: https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

Necesita disparar lo que quiera en la devolución de llamada didInsertElement en su Vista:

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});