Durandal: miglior modo per passare i dati tra le viewmodels

Question

Durandal: Qual è il modo corretto per passare i dati (parametri) tra ViewModels se possibile (senza trattare con il backend).

Lascia dire che ho 2 visite Panoramica e Dettagli Voglio che sia andato all'utente Klick su un elemento elenco da Panoramica Ci vuole l'IDDi quell'elemento e passarlo a Dettagli ViewModel in modo da poter iniziare a lavorare con quell'ID.

Grazie per l'aiuto

Answer 1

Suggerimento: probabilmente si desidera l'approccio guidato dal percorso. L'altro è per la completezza.

ViewModel-Driven Attacco In generale, direi: Creare un modulo, chiamiamo i dati e iniettare il modulo dati in entrambi i vetri di vista. Panoramica può quindi impostare l'attributo Fare clickEDELEMENTID sul modulo dati e i dettagli possono leggere il valore dell'attributo e utilizzarlo (è possibile effettuare anche l'attributo osservabile in modo che i dettagli vengano notificati quando l'attributo viene modificato tramite Panoramica). Questo approccio funziona quando entrambi i vetri di vista possono essere attivi allo stesso tempo, mentre la mia soluzione successiva (preferita) funziona solo se si instrada da una vista all'altra, quindi non sono mai attive allo stesso tempo. Questo approccio "ViewModel-Driven" è qualcosa che uso personalmente per i dati comuni nell'applicazione (è anche possibile utilizzare la vostra viewModel della shell dell'applicazione per questi tipi di attributi).

Approccio guidato via percorso Sembra essere ciò che vorresti fare la tua descrizione della situazione. I percorsi definiti possono prendere parametri (opzionali). Supponiamo che ora hai dei dettagli del percorso ", puoi cambiarlo su 'Dettagli /: ID' (accetta un parametro ID, non opzionale) o 'Dettagli (/: ID)' (accetta un parametro ID, opzionale). .

Hai bisogno di un gestore di eventi un po 'come questo per fare clic su un elemento elenco:

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

.

Ko.Datafor è un bell'assistente knockout per ottenere i dati del mirino che sono legati all'elemento che lo trasmetti, in questo caso il tuo elemento dell'elenco. On Fare clic su Si desidera navigare in dettaglio e superare l'ID dell'elemento cliccato sui dettagli. Che il codice sopra fa tutto ciò.

Ora i dettagli della funzione Attivazione di ViewModel dovrebbe assomigliare a questo:

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

.

Modifica: Suggerimento aggiuntivo: puoi anche attivare il percorso con ID direttamente da un collegamento. Supponiamo che il tuo elemento di elenco intero sia avvolto in un tag di ancoraggio, potresti fare qualcosa del genere:

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

.

Buona fortuna! Se è ancora poco chiaro fammi sapere,