ember.js - emberjs "cargando la pantalla" al principio

single-page-application hottowel

Question

No sé si ya has visto esta demo-app: http://www.johnpapa.net/hottowel/, pero una vez que la inicias, ves una pantalla de carga realmente agradable al principio, como lo harías en cualquier otra aplicación más grande. aplicación / juego de escritorio.

Así que no he tenido la oportunidad de revisar el código correctamente, pero comencé recientemente con Emberjs y tengo la sensación de que cargar todo el código js para todo el SPA que estoy construyendo podría estar en el área de los segundos.

Mi pregunta ahora, ¿cómo sería posible una pantalla de carga con emberjs? ¿O habría una mejor manera de hacerlo? (De alguna manera no creo que requirejs sea una solución, aunque podría estar equivocado)

Answer 1

Alternativa al uso de didInsertElement, willInsertElement es un evento mejor para realizar la eliminación de carga de div ya que se eliminará de la etiqueta de cuerpo "antes" de que la plantilla de la aplicación se represente y elimine el efecto de "parpadeo" (a menos que se use el posicionamiento absoluto del cargando div).

Ejemplo:

App.ApplicationView = Ember.View.extend({
  willInsertElement: function() {
      $("#loading").remove();
  }
});

Answer 2

Ember tiene una lógica de vista de carga automática.

Simplemente configurando App.LoadingView y su plantilla, Ember mostrará esa vista mientras se carga la aplicación.

Es probable que esta característica cambie en la próxima versión, a favor de una característica de ruta de carga anidada que parece prometedora. Vea abajo:

Borrador de documentación

Propuesta de características y discusión

Answer 3

En Ember 2.0 no hay más capa de Vista, pero puede hacer lo mismo con los inicializadores:

App.initializer({
  name: ''splash-screen-remover'',
  initialize: function(application) {
    $(''#loading'').remove();
  },
});

Answer 4

Me gustaría contribuir con una respuesta alternativa a esto. De forma predeterminada, ready activa cuando el DOM está listo, y puede llevar algo de tiempo procesar su aplicación después de eso, lo que resulta en (posiblemente) unos pocos segundos de página en blanco. Para mi aplicación, el uso de didInsertElement en ApplicationView fue la mejor solución.

Ejemplo:

App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
     $("#loading").remove();
  }
});

Tenga en cuenta que Ember también ofrece la posibilidad de diferir la preparación de la aplicación; consulte el código para obtener más información.

Answer 5

Tal vez es mi forma de hacer las cosas perezosamente, pero acabo de resolver esto agregando una clase no-ember a mi div.loading y en mi CSS agregué

.ember-application .no-ember {
  display: none;
}

(Ember agrega automáticamente la ember-application al body ).

De esta manera, también podría agregar animaciones CSS3 para la transición desde la pantalla de carga.

Answer 6

puedes hacer algo como esto:

App = Ember.Application.create({
  ready: function () {
    $("#loader").remove();
  }
});

en tu cuerpo estableces algo como esto

<img src="img/loading.gif" id="loader">