Instradamento Aurelia: aggiungi viste nell'interfaccia a schede

Question

Sono praticamente nuovo di zecca in Aurelia, ma nel corso di alcuni giorni ho raccolto il modello di avvio e ho seguito alcuni corsi di formazione video in Pluralsight. Ho una visione unica che non riesco a decidere se comporre elemento, elemento personalizzato o router è meglio utilizzare per questo scenario - o se ho bisogno di scrivere qualcosa di completamente personalizzato.

• preferisco continuare a utilizzare il router perché ti dà le URL e stato della storia. Potrebbe essere necessario collegare in profondità l'app web.
• Quando un view/modelmodel viene inizializzato, voglio la vista aggiunta al DOM, NON sostituito. L'elemento <router-view> sostituisce la vista.
• Con ogni vista aggiunta al DOM, vorrei creare una serie di schede che rappresentano ogni vista che è stata aperta finora. Pensa a qualsiasi editor di testo moderno, IDE o persino un browser Web che mostra schede.
• A volte sarebbe necessario rilevare se una vista è già stata renderizzata nel DOM (parametro viewmodel +) e solo portare quella vista alla parte anteriore -vs- aggiungendo la nuova.

Avete suggerimenti, esempi, ecc. Per qualcuno relativamente nuovo per Aurelia, SPA e MVVM?

Grazie.

Answer 1

Credo che il modo più semplice sia utilizzare l'elemento di composizione. Avresti bisogno di un array contenente tutti gli schermi e un altro array per contenere gli schermi aperti. Qualcosa di simile a questo:

screens = [ 
    { id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' }, 
    { id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' } 
    ]; 

    _activeScreens = []; 

    get activeScreens() { 
    return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1); 
    } 

Nella HTML è sufficiente utilizzare <compose></compose> per ogni iterazione del activeScreens.

Ho fatto questo esempio https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b per mostrarvi l'idea. Nel mio caso, ho usato un tavolo html. Nel tuo caso, potresti utilizzare un plug-in di schede, come Bootstrap o jQuery.

Spero che questo aiuti!