Usando Ember.js, ¿cómo ejecuto algunos JS después de que se muestra una vista?

Question

¿Cómo ejecuto una función después de que se inserta una Vista ámbar en el DOM?

Aquí está mi caso de uso: me gustaría usar jQuery UI para poder ordenar.

Answer 1

Debe sobrescribir didInsertElement como "Invocado 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

Es necesario para disparar lo que quiera en el didInsertElement de devolución de llamada en tu Vista:

MyEmberApp.PostsIndexView = Ember.View.extend({ 

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

}); 

Answer 3

También puede utilizar afterRender método

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

Answer 4

Ember 2. x: La vista está en desuso, use el componente en su lugar

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

A medida que los componentes se procesan, se vuelven a renderizar y finalmente se eliminan, Ember proporciona ganchos 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/

En general, didInsertElement es un gran lugar para integrarse con las bibliotecas 3 ª parte.

Este gancho garantiza dos (2) cosas,

1. elemento del componente ha sido creado y se inserta en el DOM.
2. El elemento del componente es accesible a través del método $() del componente.

En lo que necesita JavaScript para funcionar cada vez que cambian los atributos

Ejecutar el código dentro de didRender gancho.

Una vez más, por favor lea la documentación del ciclo de vida de arriba para obtener más información