Im Allgemeinen bieten die meisten Templating-Sprachen eine Möglichkeit, den Inhalt von %code% 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 %code% bereitgestellt. Outlets sind Embers Weg zu %code% in ein Layout.
Der Bereich, in dem %code% signifikant von %code% 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 %code% nicht mehr einfach direkt in Marker setzen. Du brauchst eine schlauere %code% ie: - %code% .
Es gibt 2 Seiten zu einem %code% .
Standardmäßig benötigt ein %code% 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: -
%Vor%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 %code% in einem %code% Hook eines %code% . Sie tun dies, indem Sie die Option %code% in einem Hash angeben, der als Option an die Methode %code% übergeben wird.
%Vor%Hier wird das Template %code% 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 %code% erreicht ist.
Wenn Sie eine %code% mit %code% in %code% deklarieren, geben Sie ein paar Dinge basierend auf Konvention an.
Die Vorlage %code% enthält ein Layout, das allen Posts und Unterressourcen gemeinsam ist. Auf dem absoluten Minimum muss es mindestens eine Standard-Steckdose wie, %code% enthalten.
Ohne diese %code% 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 %code% angezeigt. Wenn dies passiert, wird die Warnung %code% angezeigt. Überprüfen Sie den Ort Ihres %code% , wenn dies geschieht.
%code% 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 %code% ) deklarieren. '
Diese %code% Route kann den Inhalt dieser Ressource anzeigen. Zum Beispiel können Sie für %code% eine Liste aller %code% anzeigen. Ein sekundärer Nachteil bei dieser impliziten Route ist, dass das Modell sich auf der übergeordneten Route %code% befindet. Sie müssen %code% api verwenden, um dieses Modell in %code% zu erhalten.
%Vor%Außerdem ist diese Route %code% optional. Sie können die Benutzeroberfläche von %code% verwenden, um eine Liste von Posts anzuzeigen, direkt in die %code% Vorlage selbst. Dies bedeutet jedoch, dass jede untergeordnete Ressource auch mit der Liste der Posts zusammen mit der Steckdose in %code% 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 %code% . Er muss ein %code% 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 %code% , dh: - Eine Vorlage mit einer Standardausgabe.
Betrachten Sie die folgenden Routen.
%Vor%Hier wird %code% in %code% gerendert, was in %code% gerendert wird, was in der Standardausgabe von %code% gerendert wird. Der Rest der verwendeten Vorlagen ist unten aufgeführt.
%Vor%Diese Standardvorlagenhierarchie kann geändert werden, indem Sie der Methode %code% eine %code% -Option angeben.
%Vor%Hier wird die Vorlage %code% in die Standardausgabe der Vorlage %code% gerendert.
Das ist es. %code% ist ein weiteres Ember-Konzept, das sehr viel Konvention über die Konfiguration verwendet. Die Voreinstellungen sind ziemlich gut, gleichzeitig einfach anzupassen.
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%