Ember.js: Wie modelliere ich dieses Beispiel?

Ich habe einen kleinen JSBin Ссылка

Okay, nach einem Gespräch und ein bisschen längerem Blick, hier sind meine Gedanken, wie man das vereinfacht:

Sie haben nur eine URL, daher würde ich für jetzt nur eine Route und einen Controller verwenden.

Das Datenmodell ist ziemlich einfach, weil es vollständig hierarchisch ist:

a Anzeige hat viele Elemente , Ein Objekt hat viele Optionen

Und weil Sie immer nur ein Display gleichzeitig betrachten, brauchen Sie das Display als Modell überhaupt nicht. Wenn sich Ihre Anwendung weiterentwickelt und Sie mehrere Anzeigen gleichzeitig haben, ist es sinnvoll, ein Anzeigemodell zu implementieren und alle JSON-Anforderungen über dieses Modell auszuführen.

Ich würde eine einzelne Route und einen Controller implementieren:

Der DisplayController hat vollen Zugriff auf alle Items, da sie als Model eingestellt sind.

Ich denke, Sie brauchen nur eine Vorlage für den Moment, Sie können diese später in mehrere Teiltöne aufteilen, wenn sie außer Kontrolle geraten.

Beachten Sie die selectOption-Aktion: Wenn Sie diese Option aufrufen und die Option übergeben, können Sie den ausgewählten Status direkt in der Option selbst festlegen, was sich sofort in der Ansicht widerspiegelt.

Um die Elemente vom Server zu erhalten, können Sie App.Item.find () aufrufen und dann die ID des Bildschirms übergeben. Das ist nicht 100% konventionell, da man erwarten würde, die ID des Items hier zu übergeben, aber ich denke, zu diesem Zweck ist es in Ordnung. also würde diese Methode ungefähr wie

Ich hoffe, das hilft dir beim Einstieg und macht es vielleicht ein wenig einfacher, dein Konzept auf Ember zu übertragen. Wenn Sie Fragen haben, wie Sie zum Beispiel alles auf den Server speichern können, schießen Sie:)

Hier ist der Anfang einer Antwort:

Modelle

Ich denke, ich brauche nur drei Modelle hier. Das Dashboard ist ein wichtiger Spieler in dieser App, aber es hat keine eigenen Daten.

• Artikelmodell - enthält alle Informationen zu einem Artikel
• Optionsmodell - enthält alle Informationen für eine Option
• Anzeigemodell - enthält einen Satz ausgewählter Options-IDs, die entweder an den Server gesendet werden gespeichert oder kann verwendet werden, um die App in einen bestimmten Status zurück zu geben

Controller

Früher habe ich das Konzept von ArrayControllern völlig vermisst. Im Allgemeinen benötigt alles, was eine Sammlung ist, einen ArrayController, um es darzustellen, und nicht einen einfachen ObjectController. Meine 'Items' benötigen einen, aber ich denke nicht, dass 'Optionen' funktionieren, da Optionen untergeordnete Elemente von Item sind und Item / Items als Proxy verwenden können.

• Dashboard - Ich nehme an, das wird der bullige sein, da der Controller alle Items verarbeiten muss. Sammlungen
• Elemente - da es viele Elemente gibt, benötigen wir einen ArrayController für sie
• Item - das Item muss eine einfache Analyse seiner Optionen durchführen, wenn sich ihr Status ändert
• Option - Optionen müssen mindestens auf Klickaktionen reagieren

Vorlagen

Der Einzug stellt hier Vorlagen dar, die andere Vorlagen rendern. Zum Beispiel enthält meine Anzeigevorlage {{render dashboard}} und {{render items}} .

• Anwendung - technisch der App-Root, leitet es zum Display um (was wahrscheinlich nicht notwendig ist)
  • Anzeige - im Wesentlichen der Stamm meiner App
    • Dashboard - der Bereich, der eine visuelle Analyse von Elementen / Optionen bereitstellt
    • Elemente - rendert jedes Element
      • Optionen - macht die Optionen für jedes Element
      verfügbar

Routen

Das ist immer noch sehr verschwommen. Routen scheinen viele Rollen zu spielen (URLs zu Modellen zuordnen, Modelle für Controller setzen, vielleicht andere Sachen?). Im Moment ist die einzige URL, an die ich denken kann:

• Anzeige - da meine Anzeige einen Anwendungs-Snapshot (z. B. eine gespeicherte Version) darstellt, muss dieser in App.Router.map
angegeben werden

Andere Routen:

• ApplicationRoute
  • setupController : setzt den Controller auf eine leere / gespeicherte Anzeige
• IndexRoute
  • redirect : Leitet nur zur Anzeige Route (im Wesentlichen der Stamm der App)
• DisplayRoute
  • model : Setzt eine gegebene Anzeige als Modell
  • afterModel : Lade die auf dem Display angegebenen Elemente
  hoch

Ich denke, das ist alles. Dies ist eine einfache App und sobald ich die Elemente für eine Anzeige geladen habe, ändert die App nur die Anzeige für den Bildschirm. Es gibt Benutzerauswahlen, aber sie sind boolesche Flags (z. B. die Einstellung isAusgewählt für ein Item sollte die vom Dashboard angezeigten Daten ändern) - diese Auswahlen erfordern keine Navigation.