Wie man den UI -Status für einseitige App mit Backbone bearbeitet

Question

Tragen Sie mit mir mit, da ich von einem herkömmlichen Webentwicklungshintergrund mithilfe von ASP.NET und sogar Server Side MVC komme. Ich versuche, eine hoch interaktive einseitige Anwendung mit Backbone.js zu erstellen, um meinen JavaScript-Code zu organisieren und die Benutzeroberfläche zu erstellen.

Ich habe Probleme mit einigen Konzepten oder Ansätzen zum Aufbau der Komponenten meiner Benutzeroberfläche und der Entscheidung, wie Sie mit bestimmten Aspekten umgehen sollen. Ich werde diesen über vereinfachten Screenshot als Grundlage für meine Fragen und Diskussionen verwenden.

Verwenden wir eine "To-Do" -Anwendung als Beispiel (natürlich). Die Benutzeroberfläche ist ziemlich einfach. Ich habe die folgenden "Komponenten" ...

• Eine Ergebnisliste, die den aktuellen Satz von Aufgaben zeigt, die den aktuell ausgewählten Kriterien entsprechen
• Eine Liste meiner Aufgabenlisten (persönlich, Arbeit, Blog-Projekt)
• Eine Liste der Fällungsdatumfilter (heute, morgen, diese Woche, nächste Woche)
• Eine Liste von Tags (Fehler, Funktion, Idee, Follow -up)
• Ein Suchfeld

Gewünschte Funktionalität

• Aktualisieren Sie die Ergebnisse, wenn sich eines der Suchkriterien ändert (wählen Sie eine Liste, wählen Sie eine fällige Daten, wählen Sie eine oder mehrere Tags, geben Sie Suchtext ein usw.)
• Der Benutzer kann Listen bearbeiten, hinzufügen und löschen. (in diesem Schein nicht wirklich gezeigt)
• Der Benutzer kann Tags bearbeiten, hinzufügen und löschen. (in diesem Schein nicht wirklich gezeigt)
• Der Benutzer kann Aufgabenelemente bearbeiten, hinzufügen und löschen. (in diesem Schein nicht wirklich gezeigt)

Datenmodelle

Es gibt mehrere Modelle, die ich identifiziert habe und die "Daten" bezogen sind. Diese waren leicht zu identifizieren.

• TODO (repräsentiert ein einzelnes To-Do-Element)
• Todokollektion (stellt eine Sammlung von Aufgabenartikeln dar)
• Todolist (repräsentiert eine einzelne Aufgabenliste)
• TodolistCollection (stellt eine Sammlung von Aufgabenlisten dar)
• Tag (repräsentiert ein einzelnes Tag)
• TagCollection (repräsentiert eine Sammlung von Tags)

Wie lagert man den UI -Zustand?

Hier habe ich Probleme. Ich möchte zeigen, welche Gegenstände in meinen Menüs (auf der linken Seite) derzeit ausgewählt sind. Ich kann auf jeden Fall auf Ereignisse hören und Elementen, die ausgewählt werden, eine "ausgewählte" Klasse hinzufügen, aber ich habe auch Regeln, wie "nur eine Liste kann gleichzeitig ausgewählt werden", aber "eine beliebige Anzahl von Tags" kann bei ausgewählt werden bei eine Zeit. Da das To-Do-List-Menü und das Tags-Menü dynamisch sind, sind sie bereits einen TodolistCollection- und TagCollection-Modelle zugeordnet. Sie werden nach dem Zustand dieser "Datenmodelle" gerendert.

Wie gehe ich also mit dem Management dieses UI -Zustands für all diese unterschiedlichen Ansichten mit dem Rückgrat ab? Ich schätze Ideen oder Vorschläge.

Vielen Dank!

Answer 1

Ich hatte genau die Frage, die du gemacht hast, und ich werde dich das Geheimnis wissen lassen: betrügen.

Was Sie hier haben, sind zwei verschiedene Anwendungsebenen und einige Verwirrung darüber. Die erste Ebene ist die Beziehung zwischen Aufgabenobjekten in Ihrem System. Diese speichern in einem herkömmlichen relationalen Objektmodell und erstellen/abrufen/aktualisieren/löschen, wie Sie es bei jeder anderen erholsamen Anwendung tun würden.

Die zweite Ebene ist die Beziehung zwischen Ihrer Anzeige dieser Objekte und den Objekten selbst. Es gibt dort einen Staat, den Sie bewahren möchten. Hier ist der wichtige Erkenntnis: Solange jedes Objekt erhält, ein oder in das System veröffentlicht wird, kann die zweite Schicht völlig unabhängig von der ersten sein.

Die erste Ebene ist eine erholsame API für "A To-Do Manager". Das zweite ist etwas Einzigartiges für diese Präsentation. Es ist eine Beziehung zu Daten in der ersten ist schwierig. Also hier ist, was ich getan habe: Ich habe diesen Präsentationsschichtstatus in ein JSON-Objekt codiert und es in ein 8-Bit-sauberes Textfeld im Benutzer des Benutzers geschrieben. Jedes Mal, wenn der Benutzer den Status ändert, mache ich das.

Wenn die App geladen wird, lädt sie den Großteil der Daten aus der REST -API und die Informationen zur Präsentationsschicht, verwendet jede in der Präsentationsschicht, die keinen Sinn ergibt, und startet dann die Historie und initialisiert die Präsentation. Und der Server muss es nicht wissen irgendein Details überhaupt darüber, wie der Kunde funktioniert. Solange der Kunde Ihren erholsamen Lingo spricht, kann er "verschiedene Dinge, die sich für diesen Text interessieren" in diesem Textfeld speichern, ohne Ihre Objekte oder ihre Beziehung zu beeinträchtigen.