javascript - Ember transition & rendering complete event

ember.js promise

Question

¿Hay algún evento disparado que indique que la transición / renderización se ha completado (y el dom está visible / listo)?

setupcontroller / activate son antes de que el dom se construya / renderice

didInsertElement se activa solo la primera vez cuando ya inserté un elemento y solo estoy cambiando el modelo debajo de él.

Lo que realmente estoy buscando es que la transición sea un evento completo

Creo que puedo hacer esto, pero esperaba que ya estuviera integrado ...

Ember.Router.reopen({
didTransition:function(infos) {
this._super(infos);
console.log(''transition complete'');
}
});

Aún más frío sería una devolución de llamada a la ruta que la transición completó, debo escribir esto y enviar una solicitud de extracción.

Answer 1

El gancho afterModel podría funcionar para usted:

App.MyRoute = Ember.Route.extend({
afterModel: function(model, transition) {
transition.then(function() {
// Done transitioning
});
}
});

Probé esto usando RC-7 con rutas que tienen y no tienen segmentos dinámicos (es decir, una ruta con un modelo y una ruta sin modelo). Parece funcionar de cualquier manera.

Vea este JSBin para un ejemplo de RC-6:
Salida: http://jsbin.com/OteC/1/
Fuente: http://jsbin.com/OteC/1/edit?html,js

Answer 2

Hay un par de formas diferentes en que puedes resolver esto

didInsertElement

Se dispara cuando la vista se inserta la primera vez, pero no se dispara si el modelo se cambia bajo la vista (porque a Ember le gusta reutilizar elementos, ya que es más económico que reconstruir todo el DOM). Ejemplo a continuación.

Sencillo

Si solo necesita hacerlo una vez, la primera vez que se inserta la vista, use didInsertElement

App.FooView = Em.View.extend({
setupSomething: function(){
console.log(''the dom is in place, manipulate'');
}.on(''didInsertElement'')
});

Ejemplo: http://emberjs.jsbin.com/wuxemo/1/edit

Complejo

Si necesita programar algo después de que el DOM se haya renderizado desde la propia ruta, puede usar el schedule e insertarlo en la cola afterRender .

App.FooRoute = Em.Route.extend({
setupController: function(controller, model){
this._super(''controller'', model);
Ember.run.schedule(''afterRender'', this, function () {
//Do it here
});
}
});

Ejemplo: http://emberjs.jsbin.com/wuxemo/2/edit

Promesa de transición

La promesa de la transición se completará antes de que termine de representar los elementos. Pero te da un gancho para cuando haya terminado de buscar todos los modelos y controladores y conectarlos.

Si quiere conectarse al evento de transición, puede hacerlo así:

var self = this;
transitionTo(''foo'').then(function(){
Ember.run.schedule(''afterRender'', self, function () {
//Do it here
});
})

Answer 3

didTransition existe como esperabas, pero es una acción y no un anzuelo

XXRouter
actions: {
didTransition: function() {
this.controller.set("hasTransitioned", true); // or whatever is needed?!
return true; // Bubble the didTransition event
},
}
XXController
observeTransition: function() {
alert(''complete Transition'');
}.observes(''hasTransitioned''),

Answer 4

setupController es lo último que llama el enrutador antes de finalizar la transición. Y si se completa sin errores, en lo que se refiere a Ember, la transición está completa. Verás esto en acción al habilitar LOG_TRANSITIONS_INTERNAL .

En ese momento, no importa si el controlador arrojó un error, la vista arrojó un error, etc. El enrutador completó la transición a la ruta objetivo.

Entonces setupController es el último lugar en términos del enrutador que corresponde a didTransition .

Cuando el contenido / modelo de respaldo cambia el controlador en una vista existente, los enlaces entran en acción. La mayoría de los cambios que suceden a la vista en ese punto son a través de metamorfosis.

El lugar más cercano en el que puedo pensar para engancharme sería View.render que empuja los cambios al RenderBuffer . Pero aún necesita tener en cuenta Metamorphing a través de mixins que suceden aquí.