Verschiedene Rendering-Techniken in Emberjs Lenker Vorlage

Question

Ich habe in letzter Zeit eine Menge über Emberjs gelesen, aber etwas ist mir nicht wirklich klar: Ich habe das Gefühl, dass es verschiedene Möglichkeiten gibt, eine Vorlage zu rendern. Kann jemand die Unterschiede zwischen diesen erklären:

{{render}} 
{{partial}} 
{{template}} 
{{outlet}} 

Ich verwende pre4, also, wenn einige dieser Schlüsselwörter veraltet sind, melden Sie sich bitte.

Answer 1

Sie können die Ember.JS Quelle für alle suchen, indem Sie nach suchen: Ember.Handlebars.registerHelper('?'. Um zum Beispiel das Teil zu finden, wo template definiert ist, suchen Sie nach: Ember.Handlebars.registerHelper ('template'

{{template}}

ist ähnlich dem {{partial}}, sieht aber für Vorlagen, die Sie in dem Ember.TEMPLATES Hash definieren Aus dem Quellcode wir ein Beispiel sehen:.. Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); und dann können wir es so machen

hörte ich ein Flüstern, das {{template}} @deprecated ist, aber ich kann Finde nicht, wo ich diese Information gerade gefunden habe. Es ist jedoch erwähnenswert, dass ich mich selbst nie benutzt habe. Stattdessen bevorzuge ich {{partial}}.

Edit: Es scheint, als ob es nicht ab 3df5ddfd4f @deprecated. Mein Fehler!

{{}} Teil

Dies unterscheidet sich von dem {{render}} Ansatz, dass die controller und view werden aus dem Kontext geerbt, die sie aufgerufen. Wenn Sie sich zum Beispiel in der UserRoute befinden und in Ihrer Benutzervorlage teilweise geladen werden, werden die Werte UserView und UserController an Ihre teilweise weitergegeben, sodass sie genau auf die gleichen Informationen wie die aktuelle übergeordnete Komponente zugreifen können.

Teilnamen, wenn definiert, beginnen mit einem Unterstrich. Zum Beispiel wird eine Profile teilweise die data-template-name von: data-template-name="_profile" haben, aber wird in Ihrer Ansicht als {{partial "profile"}} eingefügt.

{{}} Ausgang

Sie werden wahrscheinlich selbst mit diesem eine Menge finden. Es wird hauptsächlich in Fällen verwendet, in denen sich die outlet aufgrund von Benutzerinteraktionen häufig ändert. Durch den Übergang zu (this.transitionTo/{{#linkTo}}) einer anderen Seite, fügt Ember die Ansicht in die {{outlet}} ein und fügt die relevanten controller und view hinzu.

Als Beispiel, wenn Sie in /#/Haustiere Übergang sind dann standardmäßig Ember die PetsView in die {{outlet}}, laden und die PetsController, all dies zu befestigen, nachdem die PetsRoute Initialisierung Anweisungen zu nehmen, bevor Initialisieren der Ansicht und Finden des Controllers.

{{}} rendern

Dies ist eine Mischung aus einem {{outlet}} und einem {{partial}}. Es wird für statische Seiten verwendet, die sich nicht für andere Seiten ausschaltet (wie eine outlet tut), aber er erbt nicht die Steuerung und Ansicht (wie eine partial tut).

Es ist besser mit einem Beispiel. Nehmen wir an, Sie haben eine Navigation. Normalerweise haben Sie nur eine Navigation, und sie wird sich nicht für eine andere ändern, aber Sie möchten, dass die Navigation ihren eigenen Controller und View hat und nicht vom Kontext geerbt wird (wahrscheinlich ApplicationRoute). Wenn Sie die Navigation einfügen ({{render "navigation"}}), fügt Ember daher App.NavigationController und App.NavigationView hinzu.

Zusammenfassung

• template: Berät eine globale Hash und fügt die Ansicht, wenn er sie findet (vielleicht bald @deprecated sein);
• partial: Wird verwendet, um komplizierte Ansichten zu teilen, und erbt die Steuerung/Ansicht von der Eltern (wenn Sie in der UserController sind, dann wird die Teil auch Zugriff auf diese haben, und die zugehörige Ansicht).
• outlet: Am häufigsten verwendet, und ermöglicht es Ihnen, Seiten für andere Seiten schnell zu wechseln. Relevanter Controller/View angehängt.
• render: Ähnlich wie eine Steckdose, wird aber für Seiten verwendet, die über die gesamte Anwendung persistent sind. Nimmt den entsprechenden Controller/View an und erbt sie nicht.

Habe ich sie gut erklären?

Nur um zu klären:

• Partial: Inherited Controller, vererbte Ansicht, nicht schaltbaren;
• Ausgang: relevanter Regler, relevante Ansicht, umschaltbar;
• Render: Relevanter Controller, relevante Ansicht, nicht umschaltbar;

Answer 2

Der Leitfaden bietet auch einige nützliche Informationen here! Im Folgenden finden Sie eine kurze Zusammenfassung:

Answer 3

ich mir eine andere Antwort hier, die wirklich geholfen schreiben wollte, als zu klären, um die verschiedenen template Techniken zu verwenden -

Strecke

Mit einer Route ist, wenn Sie eine ausgewachsene Route benötigen. Ein 'Weg' hat eine eindeutige URL und besteht aus erzeugt oder benutzerdefinierten Klassen des Typs -

1. -Route (Ember.Route)
2. Controller (Ember.Controller || || Ember.ArrayController Ember.ObjectController)
3. Ansicht (Ember.View)
4. Vorlage (Template-Lenker)

{{}} machen

Verwenden Sie den {{render}} Helfer, wenn Sie einen Blick benötigen, müssen aber nach wie vor zur Verfügung zu stellen einige Funktionen mit einem Controller. {{render}} tut nicht eine eindeutige URL haben und besteht aus folgenden Komponenten -

1. Controller (Ember.Controller || || Ember.ArrayController Ember.ObjectController)
2. Ansicht (Ember.View)
3. Vorlage (Lenker template)

{{}} Komponente

Verwenden Sie den Helper {{component}}, wenn Sie eine häufig verwendete Vorlage erstellen, die unabhängig vom Kontext, in dem sie gerendert wird, existiert. Ein anständiges Beispiel könnte sein, wenn Sie eine Einzelhandels-Website erstellen und eine Produktansicht unabhängig davon haben möchten, wo sie gerendert wird. {{component}} tut nicht haben eine eindeutige URL noch eine controller sondern hat eine component Klasse und besteht aus folgenden Komponenten -

1. Komponente (Ember.Component)
2. Vorlage (Template-Lenker)

{

Verwenden Sie den {{partial}} Helfer, wenn Sie einfach wieder- mit etwas Mark-up. {{partial}} tut nicht haben eine eindeutige URL noch eine besondere Unterstützung wie eine Komponente und besteht aus folgenden Komponenten -

1. Vorlage (Template Lenker)