ember.js - tutorial - ventajas de emberjs

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 insertar una Ember View en el DOM?

Aquí está mi caso de uso: me gustaría usar la interfaz de usuario de jQuery para permitir la clasificación.

Answer 1

Debes didInsertElement lo que quieras en la devolución de llamada didInsertElement en tu Vista:

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

Answer 2

También puede usar el 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

didInsertElement anular didInsertElement como " didInsertElement 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 didInsertElement 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 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 bibliotecas de terceros.

Este gancho garantiza dos (2) cosas,

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

En necesita JavaScript para ejecutar cada vez que cambian 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