Ansichten gegen Komponenten in Ember.js

143

Ich lerne ember.js und versuche, den Unterschied zwischen einer Ansicht und einer Komponente zu verstehen. Ich sehe beides als einen Weg, wiederverwendbare Komponenten herzustellen.

Von Embers Website zu Ansichten:

Ansichten in Ember.js werden normalerweise nur aus folgenden Gründen erstellt: -
Wenn Sie eine ausgefeilte Behandlung von Benutzerereignissen benötigen -
Wenn Sie eine wiederverwendbare Komponente erstellen möchten

Von Embers Website zu Komponenten:

Eine Komponente ist ein benutzerdefiniertes HTML-Tag, dessen Verhalten Sie mithilfe von JavaScript implementieren und dessen Erscheinungsbild Sie mithilfe von Lenkervorlagen beschreiben. Mit ihnen können Sie wiederverwendbare Steuerelemente erstellen , mit denen Sie die Vorlagen Ihrer Anwendung vereinfachen können.

Was ist der Hauptunterschied zwischen einer Ansicht und einer Komponente? Und was wäre ein häufiges Beispiel, bei dem ich lieber eine Ansicht über eine Komponente verwenden würde und umgekehrt?

Bradley Trager
quelle

Antworten:

170

Ember.View

Eine Ember.View ist derzeit auf die Tags beschränkt, die vom W3C für Sie erstellt werden. Aber wenn Sie Ihre eigenen anwendungsspezifischen HTML-Tags definieren und deren Verhalten dann mit JavaScript implementieren möchten? Mit einem Ember.View ist dies nicht möglich .

Ember.Component

Genau das können Sie mit Komponenten tun. Tatsächlich ist es eine so gute Idee, dass das W3C derzeit an der Spezifikation für benutzerdefinierte Elemente arbeitet .

Die Implementierung von Komponenten durch Ember versucht, der Spezifikation der Webkomponenten so nahe wie möglich zu kommen. Sobald benutzerdefinierte Elemente in Browsern weit verbreitet sind, sollten Sie in der Lage sein, Ihre Ember-Komponenten problemlos auf den W3C-Standard zu migrieren und sie auch von anderen Frameworks verwenden zu können, die den neuen Standard übernommen haben.

Dies ist für uns so wichtig, dass wir eng mit den Normungsgremien zusammenarbeiten, um sicherzustellen, dass unsere Implementierung von Komponenten der Roadmap der Webplattform entspricht.

Es ist auch wichtig zu beachten, dass eine Ember.Component tatsächlich eine Ember.View (eine Unterklasse) ist, die jedoch vollständig isoliert ist . Der Eigenschaftszugriff in seinen Vorlagen erfolgt zum Ansichtsobjekt , und Aktionen werden auch auf das Ansichtsobjekt gerichtet . Es gibt keinen Zugriff auf die Umgebung contextoder controller alle äußeren Kontextinformationen werden übergeben , was bei einem Ember.View nicht der Fall ist, der tatsächlich Zugriff auf den umgebenden Controller hat, z. B. in einer Ansicht, in der Sie so etwas tun könnten, wie Sie es this.get('controller')möchten Controller, der derzeit der Ansicht zugeordnet ist.

Was ist der Hauptunterschied zwischen einer Ansicht und einer Komponente?

Der Hauptunterschied neben den Komponenten, mit denen Sie Ihre eigenen Tags erstellen können, und zu einem späteren Zeitpunkt, wenn benutzerdefinierte Elemente verfügbar sind, können Sie diese Komponenten auch in anderen Frameworks migrieren / verwenden, die benutzerdefinierte Elemente unterstützen. Dies ist in der Tat, dass es sich irgendwann um eine Glutkomponente handelt wird eine Ansicht je nach dem spezifischen Implementierungsfall etwas veraltet machen.

Und was wäre ein häufiges Beispiel, bei dem ich lieber eine Ansicht über eine Komponente verwenden würde und umgekehrt?

Im Folgenden hängt dies eindeutig von Ihren Anwendungsfällen ab. Als Faustregel gilt jedoch, dass Sie in Ihrer Ansicht Zugriff auf den umgebenden Controller usw. benötigen. Verwenden Sie jedoch eine Ember.View . Wenn Sie jedoch die Ansicht isolieren und nur die Informationen übergeben möchten, die für die Arbeit erforderlich sind, ist sie kontextunabhängig und viel wiederverwendbarer, verwenden Sie eine Ember.Component .

Ich hoffe es hilft.

Aktualisieren

Mit der Veröffentlichung von Road to Ember 2.0 wird Ihnen jetzt empfohlen, in den meisten Fällen Komponenten anstelle von Ansichten zu verwenden.

intuitives Pixel
quelle
1
Ich mache mir nur Sorgen um Komponenten, wenn sie komplex werden. Ich weiß noch nicht, wie ich den logischen Teil vom Rendering-Teil trennen soll. Ich habe normale Ansichten, Sie haben diese Trennung und könnten die Logik in den Controller einbauen, aber mit Komponenten neige ich dazu zu sagen, dass Sie am Ende ein sehr komplexes und vielleicht großes Durcheinander haben werden. Wissen Sie, ob es möglich ist, einen dedizierten Controller für Komponenten zu definieren? Oder vielleicht sind Komponenten einfach nicht dazu gedacht, komplexe grafische Elemente zu verwalten.
Sly7_7
3
@ sly7_7, ja ich verstehe deinen Standpunkt. Aber ich würde mir eine Komponente als Black Box vorstellen, die sich nur basierend auf den Daten verhält, an die sie übergeben wird. Und ja, je nachdem, was sie tut, kann dies sehr schnell zu einem Chaos werden. Ein dedizierter Controller wäre absolut sinnvoll, und eine Möglichkeit, wie er funktionieren könnte, wäre, wenn Komponenten logisch in ihn eingefügt werden könnten, aber soweit ich weiß, sind Komponenten nicht von Natur aus Teil des Ember-Containers, aber es könnte sich in Zukunft ändern genau so etwas lösen. Guter Punkt trotzdem!
intuitive
2
Können irgendwelche Bindungen aus einer Komponente herausgehen? IE, mit der Blockform einer Komponente können Inhaltselemente im Block an Eigenschaften der Komponente gebunden werden, oder muss ich in diesem Fall eine Ansicht verwenden?
Michael Johnston
2
Ah, ja, sie können. {{view.xxxx}}funktioniert in einer Komponente genauso wie in einer Ansicht.
Michael Johnston
Tom Dales Kommentare zu diesem Thema: ember.zone/the-confusion-around-ember-views-and-components/…
Akshay Rawat
17

Die Antwort ist einfach: Verwenden Sie Komponenten

Laut einem Schulungsvideo, das im August 2013 aufgenommen wurde, haben Yehuda Kats und Tom Dale (Ember Core Team-Mitglieder) dem Publikum geraten, keine Ansichten zu verwenden, es sei denn, Sie sind Framework-Entwickler. Sie haben viele Verbesserungen am Lenker vorgenommen und Komponenten eingeführt, sodass keine Ansichten mehr erforderlich sind. Ansichten werden intern verwendet, um Dinge wie {{#if}} und {{outlet}} mit Strom zu versorgen.

Die Komponenten ahmen auch den Webkomponenten-Standard nach, der in den Browser integriert wird. Daher bietet das komfortable Erstellen von Ember-Komponenten viele Nebeneffekte.

Update 27.11.2014

Es ist jetzt noch wichtiger, Komponenten anstelle von Ansichten zu verwenden, da Ember 2.0 bei der Eingabe einer Route routingfähige Komponenten anstelle eines Controllers / einer Ansicht verwendet. Um Ihre App zukunftssicher zu machen, sollten Sie sich von Views fernhalten.

Quellen:

Johnny Oshika
quelle
5
"Wenn Sie der Meinung sind, dass Sie eine Ansicht verwenden müssen, verwenden Sie stattdessen eine Komponente." ist ein schrecklicher Rat und verrät einen Mangel an Verständnis für die Isolation, die Komponenten beinhalten.
jmcd
@jmcd, obwohl dieser Kommentar von den Framework-Entwicklern selbst kam, habe ich ihn herausgenommen.
Johnny Oshika
2
Ich habe die Quelle gefunden: Gaslight-Videotraining, Video 10.3 Komponenten-Fragen und Antworten bei 26 m. Tom sagt: '' Seit diese Beispiele geschrieben wurden, ... haben wir Komponenten hinzugefügt [die] nicht existierten, als diese Beispiele geschrieben wurden. Im Allgemeinen würde ich sagen, dass Ansichten nicht das sind, was wir von den meisten Entwicklern erwarten würden, sie sind zu diesem Zeitpunkt eher ein internes Buchhaltungsobjekt '
jmcd
2
@jmcd, In diesem Video @ 26:15 sagt Tom "benutze grundsätzlich keine Ansichten". Wenn Sie im selben Video auf 30 m springen, sagt Yehuda Katz: "Ansicht ist im Grunde ein internes Implementierungsdetail ... Sie könnten eine Ansicht verwenden, aber dann sind Sie ein Framework-Entwickler. Sie sollten stattdessen eines der Dinge verwenden Das haben wir für Sie erstellt, das View verwendet, und dasjenige, das View am nächsten kommt, aber eine bessere Semantik aufweist, ist Component. Alles, wofür Sie zuvor eine View hätten verwenden können, ist Component in Ordnung. "
Johnny Oshika
5

In v2.xder jetzigen Form - als aktuelle stabile Version - sind die Ansichten vollständig veraltet. Es wird gesagt, dass Ansichten aus der Ember 2.0-API entfernt werden .

Die Verwendung eines {{view}}Schlüsselworts in Ember 2.0 löst also eine Behauptung aus:

Behauptung fehlgeschlagen: Die Verwendung {{view}}oder ein darauf basierender Pfad wurde in Ember 2.0 entfernt

Wenn Sie Ansichten in Ember 2.0 verwenden müssen, können Sie das Add- Ember Ember-Legacy-Ansichten verwenden , das bis Version 2.4 mit Ember kompatibel ist .

Zusammenfassend lässt sich sagen, dass Komponenten die Gegenwart (Ansichten werden entfernt) und die Zukunft sind. Sie werden auch Steuerungen ersetzen. Siehe Routable Components RFC .

Daniel Kmak
quelle