2013-02-12 11 views
5

Ho un'applicazione Dart + Web UI che deve prima caricare i dati dall'archivio IndexedDB locale. L'API IndexedDB è asincrona, quindi ricevo una richiamata quando i miei dati vengono caricati. Non voglio visualizzare alcun elemento dell'interfaccia utente fino a quando il mio database non è stato aperto per la prima volta e pronto per l'uso.Come faccio a visualizzare l'interfaccia utente solo dopo l'inizializzazione della mia app?

Come posso attendere l'inizializzazione del mio database prima di visualizzare la mia IU?

risposta

5

lo faccio nel mio progetto modo utente web:

... 
<body> 
    <template if="showApplication"> 
    <span>The app is ready.</span> 
    </template> 
</body> 
... 
@observable bool showApplication = false; 

main() { 
    // Initialize... 
    window.indexedDB.open(...).then((_) { 
    showApplication = true; 
    }); 
} 

Questo ha anche un ulteriore vantaggio: codice separato/componenti web possono anche controllare lo stato dell'app prima di fare affidamento sulla connettività db, ecc.

3

Nascondi il tag body con visibility:hidden:

<body style="visibility:hidden"> 
    <!-- content --> 
</body> 

E poi vederlo in poi() di callback del vostro futuro

window.indexedDB.open(dbName, 
    version: version, 
    onUpgradeNeeded: createObjectStore).then(handleDBOpened); 

handleDBOpened(..) { 
    query('body').style.visibility = "visible"; // <-- show the body tag 
} 
+1

Questo non sempre importa, ma una sottile differenza tra l'uso della visibilità (questa risposta) e l'uso un modello-se (la risposta di Kai) è qualsiasi cosa all'interno del modello, se non viene valutata quando la condizione è falsa, quindi se si ha: '

' vs '
{{x.foo}}
', quindi il modello, se impedirà un dereferenziamento nullo, ma l'approccio nascosto alla visibilità non lo farà. –

+0

Cool - grazie per averlo indicato! –