Come Handling UI Stato per pagina singola app con Backbone

Question

Orso con me come io vengo da un tradizionale fondo di sviluppo web, utilizzando ASP.Net, e sul lato server, anche MVC. Sto tentando di creare un'applicazione singola pagina altamente interattivo usando Backbone.js per aiutare ad organizzare il mio codice javascript e costruire l'interfaccia utente.

Ho problemi con alcuni concetti, o si avvicina a costruire i componenti della mia interfaccia utente, e decidere come gestire alcuni aspetti. Ho intenzione di utilizzare questa schermata semplificato come base per le mie domande e la discussione.

l'uso di Let un'applicazione "cose ??da fare" come esempio (ovviamente). L'interfaccia utente è abbastanza semplice. Ho le seguenti "componenti" ...

• Una risultati lista che mostra l'attuale serie di cose da fare che corrispondono ai criteri attualmente selezionati
• una lista dei miei to-do list (personale, lavoro, blog del progetto)
• Un elenco di filtri data di scadenza (oggi, domani, questa settimana, la prossima settimana)
• Un elenco di tag (Bug, Feature, Idea, Follow Up)
• Una casella di ricerca

Funzionalità desiderata

• Aggiorna i risultati ogni volta che uno dei criteri di ricerca modifiche (scegliere una lista, scegliere un dato dovuti, scegliere uno o più tag, inserire il testo di ricerca, ecc.)
• La lattina di modifica dell'utente, aggiungere, e le liste di eliminazione. (In realtà non mostrato in questo fino finto)
• La lattina di modifica dell'utente, aggiungere, e tag di eliminazione. (In realtà non mostrato in questo fino finto)
• La lattina di modifica dell'utente, aggiungere ed eliminare gli elementi to-do. (In realtà non mostrato in questo fino finto)

Modelli di dati

Ci sono diversi modelli che ho identificato che sono "dati" relativi. Questi erano facili da identificare.

• ToDo (rappresenta un singolo elemento to-do)
• ToDoCollection (rappresenta un insieme di attività da svolgere)
• ToDoList (rappresenta una singola to-do list)
• ToDoListCollection (rappresenta un insieme di to-do list)
• Tag (rappresenta un singolo tag)
• TagCollection (rappresenta un insieme di tag)

Come conservare UI Stato?

Questo è dove sto avendo difficoltà. Voglio mostrare che oggetti nel mio menu (sul lato sinistro) sono attualmente selezionato. Posso certamente ascoltare gli eventi e aggiungere una classe "selezionato" per gli elementi come sono selezionati, ma ho anche regole, come "una sola lista può essere selezionato alla volta", ma "qualsiasi numero di tag" possono essere selezionati un tempo. Inoltre, perché il menu To-Do List e il menu tag sono dinamiche, che già sono associati ad un ToDoListCollection e TagCollection modelli già. Essi sono resi in funzione dello stato di questi "modelli di dati".

Quindi, come faccio a gestire la gestione di questo stato di interfaccia utente per tutti questi diversi punti di vista utilizzando Backbone? Apprezzo tutte le idee o suggerimenti.

Grazie!

Answer 1

ho avuto esattamente la domanda che hai fatto, e io farò sapere il segreto:. Trucco

Quello che avete qui è di due diversi livelli applicativi, e una certa confusione su di loro. Il primo strato è il rapporto tra to-do gli oggetti nel vostro sistema. Questi, si memorizzano in un modello relazionale oggetti tradizionali, e si crea / recuperare / aggiornamento / cancellarli come si farebbe con qualsiasi altra applicazione RESTful.

Il secondo strato è la relazione tra la visualizzazione di questi oggetti, e gli stessi oggetti. C'è qualche stato non si desidera conservare. Ecco l'intuizione importante:. Fintanto che ogni oggetto GET, PUT, o inviati al sistema ha un ID univoco, il secondo strato può essere completamente indipendente dalla prima

Il primo strato è un'API RESTful a "un to-do". Il secondo è qualcosa di unico per questa presentazione. E 'relazione ai dati del primo è tenue. Quindi, ecco quello che ho fatto: ho codificato tale stato di presentazione strato in un oggetto JSON e scritto per un campo di testo pulito 8-bit nel profilo dell'utente. Ogni volta che l'utente cambia di stato, lo faccio.

Al caricamento app, carica la maggior parte dei dati dal API REST e le informazioni di livello di presentazione, i rigetti qualsiasi nello strato di presentazione che non ha senso, e poi inizia Backbone.History e inizializza la presentazione. E il server non ha bisogno di sapere qualsiasi dettagli a tutti su come funziona il client. Fino a quando il cliente parla la vostra gergo RESTful, si può salvare "cose ??varie cure questo particolare client su" a quel campo di testo senza alterare gli oggetti o il loro rapporto.