Komponenten in Ember 2 verstehen

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!