Schermata iniziale Durandal quando si lavora con promesse

Question

La mia SPA basata su durandal effettua varie chiamate asincrone ajax nella funzione di attivazione di viewmodels. Sto restituendo una promessa usando Q dalla funzione di attivazione.

function activate(){ 
     return Q.fcall(['getPersons', 'getAgenda']); 
} 

function getPersons(){ 
     var defer = Q.defer(); 
     $.ajax({ 
     //omitting most of the settings 
     success: function(data){ 
       defer.resolve(data); 
     }, 
     error: function(xhr, status){ 
       defer.reject(status); 
     } 
     }); 

    return defer.promise; 
} 

Codice simile esiste anche nella funzione getAgenda. Tutto questo funziona bene e il mio schermo passa in. Il problema è che il mio getAgenda richiede un po '(da 2 a 3 secondi). La schermata iniziale non viene visualizzata, lo schermo rimane dov'era per 2 o 3 secondi prima della transizione.

La schermata iniziale è semplice e mostra la prima volta che il sito viene caricato. Qualche idea?

Answer 1

Supponendo che la schermata iniziale sia simile a http://durandaljs.com/documentation/Adding-a-Splash-Screen, si tratta di una schermata iniziale che viene sovrascritta in app.start.

<div id="applicationHost"> 
    <div class="splash"> 
     <div class="message"> 
      Durandal Starter Kit 
     </div> 
     <i class="icon-spinner icon-2x icon-spin active"></i> 
    </div> 
</div> 

Probabilmente stai cercando un tipo di indicatore di caricamento. Eg in campioni questo è implementato in base a router.isNavigating, quindi in vm create simil isLoading osservabile, che si imposta su true prima della chiamata asincrona e su false una volta terminato.

https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.html#L13

<div class="loader pull-right" data-bind="css: { active: router.isNavigating }"> 
    <i class="icon-spinner icon-2x icon-spin"></i> 
</div> 

Answer 2

ho voluto integrare Pacejs in navigazione Durandal, ed è finito abbastanza facile grazie alla router.isNavigating

Ecco il succo https://gist.github.com/volak/4aca442373b4216a52b5