emberjs "schermata di caricamento" all'inizio

Question

Non lo so, se hai già visto questa demo-app: http://www.johnpapa.net/hottowel/ ma una volta avviata, si vede una schermata di caricamento molto bella all'inizio come in qualsiasi altro applicazione/gioco desktop.

Quindi non ho avuto la possibilità di leggere il codice correttamente da solo, ma ho iniziato da poco con Emberjs e ho la sensazione che il caricamento di tutto il codice js per l'intera SPA che sto costruendo possa essere l'area dei secondi.

La mia domanda ora, come sarebbe possibile una tale schermata di caricamento con emberjs? O ci sarebbe un modo migliore per farlo? (Io in qualche modo non credo requirejs sarebbe una soluzione, anche se potrei sbagliarmi)

Answer 1

si può fare qualcosa di simile:

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

nel vostro corpo si imposta qualcosa di simile

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

Answer 2

Mi piacerebbe dare una risposta alternativa a questo. Per impostazione predefinita, ready si attiva quando il DOM è pronto e potrebbe essere necessario del tempo per eseguire il rendering dell'applicazione, ottenendo (eventualmente) alcuni secondi di pagina vuota. Per la mia applicazione, utilizzare didInsertElement su ApplicationView era la soluzione migliore.

Esempio:

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

prega di notare che Ember offre anche la possibilità di differire la prontezza applicazione, vedere the code per ulteriori informazioni.

Answer 3

Forse è il mio modo pigro di fare le cose, ma ho appena risolto questo con l'aggiunta di una classe no-ember alla mia div.loading e nel mio CSS ho aggiunto

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

(Ember aggiunge automaticamente il ember-application al body.)

In questo modo, è possibile aggiungere anche animazioni CSS3 per passare dalla schermata di caricamento.

Answer 4

Ember ha una logica di visualizzazione caricamento automatico.

Semplicemente impostando App.LoadingView e il relativo modello, Ember mostrerà quella vista durante il caricamento dell'applicazione.

Questa funzione è destinata a cambiare nella prossima versione, a favore di una funzione di caricamento nidificata che sembra promettente. Vedi sotto:

Draft documentation

Feature proposal and discussion

Answer 5

alternativa all'utilizzo didInsertElement, il willInsertElement è un evento migliore per eseguire la rimozione di carico div poiché sarà rimosso dal tag body "prima" il modello di applicazione è reso al suo interno ed elimina l'effetto "sfarfallio" (a meno che non si utilizzi il posizionamento assoluto del div di caricamento).

Esempio:

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

Answer 6

In Ember 2.0 non c'è più View livello, ma si può fare lo stesso con inizializzatori:

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