Schlüsselpunkte

• Ember-Komponente ist der Kern von Ember-Anwendungen, mit dem Entwickler benutzerdefinierte, anwendungsspezifische HTML-Tags definieren und ihr Verhalten mithilfe von JavaScript implementieren k?nnen. In Ember 2.x ersetzen Komponenten Ansichten und Controller.
• Die Ember -Komponente enth?lt eine Lenker -Vorlagendatei und eine passende Ember -Klasse. Diese Komponenten k?nnen mit anderen Komponenten verwendet werden und k?nnen sogar in übergeordneten Komponenten verschachtelt sein und Eigenschaften aufweisen, die native HTML -Elemente ?hneln.
• dynamische Daten k?nnen über ein Modell zu Ember -Anwendungen hinzugefügt werden (das Objekt, das die zugrunde liegenden Daten darstellt, die die Anwendung dem Benutzer vorlegt). Dies erm?glicht die Erstellung interaktiver und dynamischer Komponenten.
• Benutzerinteraktion kann einer Komponente mit Aktionen (Aktionen an die Komponentenklasse gesendet) zu einer Komponente hinzugefügt werden. Diese Aktionen k?nnen verwendet werden, um interaktive Elemente zu erstellen, z. B. klickbare Registerkarten, auf denen unterschiedliche Inhalte angezeigt werden.

Dieser Artikel wurde von Edwin Reynoso und Nilson Jacques von Experten überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, um den Inhalt von SitePoint für seine besten zu erhalten! Sie erm?glichen es Ihnen, Ihre eigenen, anwendungsspezifischen HTML-Tags zu definieren und ihr Verhalten mit JavaScript zu implementieren. Beginnend mit Ember 2.x ersetzen Komponenten Ansichten und Controller (veraltet) und sind die empfohlene M?glichkeit, Ember -Anwendungen zu erstellen. Die Komponentenimplementierung von

Ember folgt so weit wie m?glich den W3C -Webkomponentenspezifikationen. Sobald im Browser benutzerdefinierte Elemente weit verbreitet sind, sollte es einfach sein, die Glutkomponenten in den W3C -Standard zu migrieren und sie durch andere Frameworks nutzbar zu machen.

Wenn Sie mehr darüber erfahren m?chten, warum die routbaren Komponenten Controller und Ansichten ersetzen, lesen Sie dieses kurze Video von den Mitgliedern des Ember Core -Teams Yehuda Katz und Tom Dale.

Registerkarte Switcher Application

Um einen Einblick in die Ember -Komponente zu erhalten, erstellen wir ein Registerkarten -Switcher -Widget. Dies enth?lt eine Reihe von Registerkarten mit relevanten Inhalten. Wenn Sie auf eine Registerkarte klicken, wird der Inhalt dieser Registerkarte angezeigt und den Inhalt anderer Registerkarten ausgerichtet. Einfach genug? Fangen wir an.

Wie immer finden Sie den Code für dieses Tutorial in unserem Github -Repository oder in diesem Ember Twiddle, wenn Sie mit dem Code in Ihrem Browser experimentieren m?chten.

Zusammensetzung der Ember -Komponente

Die Ember -Komponente enth?lt eine Lenker -Vorlagendatei und eine passende Ember -Klasse. Diese Klasse muss nur implementiert werden, wenn wir eine zus?tzliche Interaktion mit den Komponenten ben?tigen. Komponenten werden ?hnlich wie gew?hnliche HTML -Tags verwendet. Wenn wir die Tab -Switcher -Komponente erstellen, k?nnen wir sie so verwenden:

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Die Vorlagendatei der Ember -Komponente befindet sich im Verzeichnis app/templates/components. Die Klassendatei befindet sich in App/Komponenten. Wir verwenden alle Kleinbuchstaben. Dies wird nach Konvention benannt, wodurch Namenskonflikte mit zukünftigen HTML -Webkomponenten vermieden werden k?nnen.

Unsere Haupt-Ember-Komponente ist Registerkarten-Switcher. Beachten Sie, dass ich über die Hauptkomponente spreche, da wir mehrere Komponenten haben. Sie k?nnen Komponenten in Verbindung mit anderen Komponenten verwenden. Sie k?nnen sogar Komponenten in einer anderen übergeordneten Komponente nisten. Im Fall unseres Registerkarte-Switcher haben wir eine oder mehrere Tab-Elemente-Komponenten, wie unten gezeigt:

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Wie Sie sehen, k?nnen Komponenten auch Eigenschaften wie native HTML -Elemente haben.

EMBER 2.x -Projekt erstellen

Um diesem Tutorial zu folgen, müssen Sie ein Ember 2.x -Projekt erstellen. Die Methode lautet wie folgt:

Ember wird mit NPM installiert. Hier finden Sie Tutorials für NPM.

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

Zum Zeitpunkt des Schreibens dieses Artikels wird die Version 1.13

eingeführt

<code>npm install -g ember-cli
</code>

Erstellen Sie als n?chstes eine neue Ember -Anwendung:

<code>ember -v
=> version: 1.13.8
</code>

Navigieren Sie zu diesem Verzeichnis und bearbeiten Sie die Datei bower.json, um die neuesten Versionen von Ember, Ember-Data und Ember-Load-Initialisierern zu enthalten:

<code>ember new tabswitcher</code>

Zurück zum Terminal und Lauf:

<code>{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}
</code>

Bower kann Sie dazu veranlassen, die Version von Ember zu analysieren. W?hlen Sie Version 2.1 aus der angegebenen Liste aus und pr?fixen sie mit einem Ausrufezeichen, um die L?sung für Bower.json zu bestehen.

als n?chstes den Entwicklungsserver von Ember CLI:

<code>bower install
</code>

Navigieren Sie zuletzt zu http: // localhost: 4200/und überprüfen Sie die Version der Browserkonsole.

Erstellen Sie eine Tab -Switcher -Komponente

Erstellen wir eine Tab-Switcher-Komponente mit dem integrierten Generator von Ember:

<code>ember server</code>

Dies erstellt drei neue Dateien. Eines ist unsere HTML-Handlungsdatei (App/Templates/Komponenten/tab-switcher.hbs) Integration/Komponenten/tab-switcher-test.js). Testkomponenten liegen nicht im Rahmen dieses Tutorials, aber Sie k?nnen mehr darüber auf der Ember -Website lesen.

Führen Sie nun Ember Server aus, um den Server zu laden und zu http: // localhost: 4200/zu navigieren. Sie sollten eine Begrü?ungsnachricht mit dem Titel "Willkommen bei Ember" sehen. Warum werden unsere Komponenten nicht angezeigt? Nun, wir haben es noch nicht benutzt, also lass es uns jetzt benutzen.

Verwenden von Komponenten

?ffnen Sie die Anwendungsvorlage App/Vorlagen/application.hbs. Fügen Sie das Folgende nach dem H2 -Tag hinzu, um die Komponente zu verwenden.

<code>ember generate component tab-switcher</code>

In Ember k?nnen Komponenten auf zwei Arten verwendet werden. Die erste Methode, die als Inline -Form bezeichnet wird, besteht darin, sie ohne Inhalt zu verwenden. Das machen wir hier. Die zweite Methode wird als Blockform bezeichnet, mit der die Lenkervorlage an die Komponente übergeben und die Vorlage wiedergegeben werden kann, wobei der Ausdruck {{Relief}} in der Komponentenvorlage angezeigt wird. In diesem Tutorial halten wir uns an die Inline -Form.

Dies zeigt jedoch immer noch nichts auf dem Bildschirm. Dies liegt daran, dass die Komponente selbst nichts zu zeigen hat. Wir k?nnen dies ?ndern, indem wir der Vorlagendatei der Komponenten die folgende Zeile hinzufügen (App/Templates/Komponenten/tab-switcher.hbs):

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Wenn die Seite neu l?dt (was automatisch auftreten sollte), wird der oben gezeigte Text angezeigt. Ein aufregender Moment!

Registerkartenprojektkomponenten erstellen

Jetzt, da wir unsere Hauptkomponente für tab-switcher eingerichtet haben, erstellen wir einige Registerkartenkomponenten, um darin zu nisten. Wir k?nnen eine neue Tab-Elemente-Komponente wie folgt erstellen:

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

?ndern Sie nun die Lenkerdatei der neuen Komponente (App/Templates/Komponenten/tab-iTem.hbs) auf:

<code>npm install -g ember-cli
</code>

Nisten wir als n?chstes drei Registerkarten in unserer Hauptkomponente der Registerkarte. ?ndern Sie die Registerkarte-Swither-Vorlagendatei (App/Vorlagen/Komponenten/tab-switcher.hbs) in:

<code>ember -v
=> version: 1.13.8
</code>

Wie oben erw?hnt, rendert die Rendite -Helfer -Funktion jede Lenkervorlage, die an unsere Komponente übergeben wurde. Dies ist jedoch nur dann nützlich, wenn wir Registerkarten-Switcher in Blockform verwenden. Da wir dies nicht getan haben, k?nnen wir die Ertragshelferfunktion vollst?ndig entfernen.

Wenn wir uns jetzt den Browser ansehen, werden wir drei Tab-Element-Komponenten sehen, die alle "Registerkarte Elements Titel" anzeigen. Unsere Komponente ist jetzt ziemlich statisch, fügen wir also einige dynamische Daten hinzu.

(Der Rest ?hnelt der vorherigen Ausgabe, mit der Ausnahme, dass die Abs?tze neu organisiert und formuliert werden, um die Inhaltskonsistenz aufrechtzuerhalten und Duplizierung zu vermeiden. Um Platz zu sparen, wird hier nicht wiederholt. >

Das obige ist der detaillierte Inhalt vonKomponenten in Ember 2 verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!