Kann jemand in einfachen Worten erklären, wie verschachtelte Steckdosen in Ember-Vorlagen funktionieren?
Insbesondere versuchen, dies aus den Dokumenten zu verstehen: Ссылка
"Die direkte Elternroute wurde nicht zum Hauptoutlet gerendert ..."
Dies bedeutet, dass die aktuelle Route versucht hat, in das Elternobjekt zu rendern Vorlage der Route, aber die übergeordnete Route hat keine Vorlage gerendert, oder Wenn dies der Fall ist, hat die Vorlage, die die Elternroute bereitgestellt hat, dies nicht getan Render in die Hauptvorlage (d. h. eine Standard {{outlet}}).
Genauer gesagt versuche ich zu verstehen, wie man in meiner App eine hierarchische Ansichtshierarchie erstellt. Es ist drei Schichten tief von Sammlungen. Ich möchte eine Reihe zusammenklappbarer verschachtelter Ansichten erstellen, basierend auf den Inhalten der Sammlungen. Die Datenstruktur könnte baumartig sein.
Bibliotheken - & gt; Jede Bibliothek hat viele Bücher - & gt; Jedes Buch hat viele Seiten
Suchen Sie nach einem illustrativen jsbin- oder Codebeispiel, das die verschachtelte Vorlagenstruktur in der Praxis demonstriert.
Stellen Sie sich einen Router vor, der so aussieht:
%Vor% Im Allgemeinen bieten die meisten Templating-Sprachen eine Möglichkeit, den Inhalt von target einer Seite in ein Hauptlayout zu integrieren. Dies ermöglicht die Trennung des allgemeinen Seitenlayouts in eine andere Datei und die kleinere Zielvorlage in einer anderen Datei.
In Ember gab es einige Iterationen, derzeit wird diese Funktionalität vom Helfer {{outlet}} bereitgestellt. Outlets sind Embers Weg zu yield in ein Layout.
Der Bereich, in dem outlet signifikant von yield abweicht, ist eine Verschachtelung. Auf der Serverseite ist viel einfacher. Sie müssen nur die Bereiche einer Vorlage markieren, in die sie übergehen und dann aufrufen, um einen Block des Inhalts in das angegebene Ziel zu bringen.
Wenn jedoch das Rendering von Inhalten auf clientseitiges JavaScript umgestellt wird, werden nur Teile einer Seite bei Bedarf aktualisiert. Sie können yield nicht mehr einfach direkt in Marker setzen. Du brauchst eine schlauere yield ie: - outlet .
Es gibt 2 Seiten zu einem {{outlet}} .
{{outlet}} Helfer. render , die im renderTemplate -Hook verwendet wird. Standardmäßig benötigt ein {{outlet}} keinen Namen. Dies macht es zum Standardoutlet für diese Vorlage. In einer Vorlage kann es viele solcher Steckdosen geben und sie können durch Angabe eines Namens angegeben werden. Für zB: -
Dies deklariert 2 Ausgänge namens 'sidebar' und 'nav'. Sie können nun andere Vorlagen in diese Steckdosen rendern.
Standard-Outlets werden beim Rendern ohne expliziten Ausgangsnamen verwendet. Bei benannten Outlets erfolgt das Rendering durch Aufruf von render in einem renderTemplate Hook eines Route .
Sie tun dies, indem Sie die Option outlet in einem Hash angeben, der als Option an die Methode render übergeben wird.
Hier wird das Template recentPosts in einem Outlet mit dem Namen 'sidebar' innerhalb seiner Elternvorlage gerendert.
Wenn Routen in anderen verschachtelten Routen verschachtelt sind, werden sie in die nächste übergeordnete Ausgabe gerendert. Wenn die übergeordnete Ressource keine Standardausgabe hat, wird sie als übergeordnetes Element verwendet usw., bis die Vorlage application erreicht ist.
Wenn Sie eine resource mit this.resource('posts'); in Router deklarieren, geben Sie ein paar Dinge basierend auf Konvention an.
posts mit der Layoutvorlage posts . posts.index route mit der Vorlage posts/index . Die Vorlage posts enthält ein Layout, das allen Posts und Unterressourcen gemeinsam ist. Auf dem absoluten Minimum muss es mindestens eine Standard-Steckdose wie, {{outlet}} enthalten.
Ohne diese {{outlet}} haben untergeordnete Routen keinen unmittelbaren Ausgang, in den sie rendern können. Sie werden dann im übergeordneten Element dieses übergeordneten Elements oder letztendlich im Outlet der Vorlage application angezeigt. Wenn dies passiert, wird die Warnung "The immediate parent route did not render into the main outlet ..." angezeigt. Überprüfen Sie den Ort Ihres outlets , wenn dies geschieht.
posts.index ist eine implizite Route für alle Ressourcen, die verschachtelte Routen haben. Mit anderen Worten, wenn Ihre Ressource verschachtelte Routen hat, müssen Sie nicht explizit eine geschachtelte this.route('index ) deklarieren. '
Diese index Route kann den Inhalt dieser Ressource anzeigen. Zum Beispiel können Sie für posts.index eine Liste aller posts anzeigen. Ein sekundärer Nachteil bei dieser impliziten Route ist, dass das Modell sich auf der übergeordneten Route posts befindet. Sie müssen needs api verwenden, um dieses Modell in PostsIndexController zu erhalten.
Außerdem ist diese Route posts.index optional. Sie können die Benutzeroberfläche von posts/index verwenden, um eine Liste von Posts anzuzeigen, direkt in die posts Vorlage selbst. Dies bedeutet jedoch, dass jede untergeordnete Ressource auch mit der Liste der Posts zusammen mit der Steckdose in posts gerendert wird. Die Entscheidung, ob eine explizite Indexroute verwendet werden soll oder nicht, hängt von der Benutzeroberfläche ab, die angezeigt werden muss.
Über allen anderen Vorlagen sitzt die Vorlage application . Er muss ein outlet für verschachtelte Ressourcen haben, in die gerendert werden soll, und enthält normalerweise das für die Seite übliche Layout. Wenn Sie keine Anwendungsvorlage angeben, wird eine Standardvorlage verwendet. Diese generierte Vorlage entspricht {{outlet}} , dh: - Eine Vorlage mit einer Standardausgabe.
Betrachten Sie die folgenden Routen.
%Vor% Hier wird posts.new in posts gerendert, was in posts gerendert wird, was in der Standardausgabe von application gerendert wird. Der Rest der verwendeten Vorlagen ist unten aufgeführt.
Diese Standardvorlagenhierarchie kann geändert werden, indem Sie der Methode into eine render -Option angeben.
Hier wird die Vorlage posts in die Standardausgabe der Vorlage sidebar gerendert.
Das ist es. Outlet ist ein weiteres Ember-Konzept, das sehr viel Konvention über die Konfiguration verwendet. Die Voreinstellungen sind ziemlich gut, gleichzeitig einfach anzupassen.
Tags und Links ember.js ember-rails