Ember App-Struktur und Komponentisierung
In diesem Artikel planen wir die Struktur unserer TodoMVC-Ember-App, fügen das HTML hinzu und unterteilen diese HTML-Struktur in Komponenten.
Voraussetzungen: |
Es wird empfohlen, dass Sie mit den grundlegenden HTML, CSS und JavaScript-Sprachen vertraut sind und Kenntnisse über das Terminal/Kommandozeile besitzen. Ein tieferes Verständnis moderner JavaScript-Funktionen (wie Klassen, Module usw.) ist äußerst vorteilhaft, da Ember sie intensiv nutzt. |
---|---|
Ziel: | Lernen, wie man eine Ember-App strukturiert und diese Struktur in Komponenten unterteilt. |
Planung des Layouts der TodoMVC-App
Im letzten Artikel haben wir ein neues Ember-Projekt eingerichtet und unsere CSS-Stile hinzugefügt und konfiguriert. An diesem Punkt fügen wir etwas HTML hinzu und planen die Struktur und Semantik unserer TodoMVC-App.
Das HTML der Landing-Page unserer Anwendung ist in app/templates/application.hbs
definiert. Diese Datei existiert bereits und ihr Inhalt sieht derzeit folgendermaßen aus:
{{!-- The following component displays Ember's default welcome message. --}}
<WelcomePage />
{{!-- Feel free to remove this! --}}
{{outlet}}
<WelcomePage />
ist eine Komponente, die von einem Ember-Addon bereitgestellt wird und die Standard-Willkommensseite rendert, die wir im vorherigen Artikel gesehen haben, als wir erstmals zu unserem Server unter localhost:4200
navigierten.
Das möchten wir jedoch nicht. Stattdessen soll es die Struktur der TodoMVC-App enthalten. Beginnen Sie damit, den Inhalt von application.hbs
zu löschen und ihn durch Folgendes zu ersetzen:
<section class="todoapp">
<h1>todos</h1>
<input
class="new-todo"
aria-label="What needs to be done?"
placeholder="What needs to be done?"
autofocus />
</section>
Note:
aria-label
bietet eine Beschriftung, die für unterstützende Technologien genutzt werden kann - zum Beispiel für einen Screenreader zum Vorlesen. Dies ist nützlich in Fällen, in denen wir ein<input>
ohne entsprechendes HTML-Text verwenden, das in eine Beschriftung umgewandelt werden könnte.
Wenn Sie application.hbs
speichern, wird der Entwicklungsserver, den Sie zuvor gestartet haben, die App automatisch neu erstellen und den Browser aktualisieren. Die gerenderte Ausgabe sollte nun so aussehen:
Es erfordert nicht viel Aufwand, unser HTML wie eine voll funktionsfähige To-do-Listen-App aussehen zu lassen. Aktualisieren Sie die Datei application.hbs
erneut, damit ihr Inhalt folgendermaßen aussieht:
<section class="todoapp">
<h1>todos</h1>
<input
class="new-todo"
aria-label="What needs to be done?"
placeholder="What needs to be done?"
autofocus />
<section class="main">
<input id="mark-all-complete" class="toggle-all" type="checkbox" />
<label for="mark-all-complete">Mark all as complete</label>
<ul class="todo-list">
<li>
<div class="view">
<input
aria-label="Toggle the completion of this todo"
class="toggle"
type="checkbox" />
<label>Buy Movie Tickets</label>
<button
type="button"
class="destroy"
title="Remove this todo"></button>
</div>
<input autofocus class="edit" value="Todo Text" />
</li>
<li>
<div class="view">
<input
aria-label="Toggle the completion of this todo"
class="toggle"
type="checkbox" />
<label>Go to Movie</label>
<button
type="button"
class="destroy"
title="Remove this todo"></button>
</div>
<input autofocus class="edit" value="Todo Text" />
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count"> <strong>0</strong> todos left </span>
<ul class="filters">
<li>
<a href="#">All</a>
<a href="#">Active</a>
<a href="#">Completed</a>
</li>
</ul>
<button type="button" class="clear-completed">Clear Completed</button>
</footer>
</section>
Die gerenderte Ausgabe sollte nun wie folgt aussehen:
Das sieht ziemlich vollständig aus, aber denken Sie daran, dass dies nur ein statischer Prototyp ist. Nun müssen wir unseren HTML-Code in dynamische Komponenten unterteilen; später werden wir daraus eine voll interaktive App machen.
Wenn wir den Code neben der gerenderten Todo-App betrachten, gibt es eine Reihe von Möglichkeiten, wie wir die Benutzeroberfläche aufteilen könnten, aber lassen Sie uns den Plan verfolgen, das HTML in die folgenden Komponenten zu unterteilen:
Die Komponentengruppierungen sind wie folgt:
-
Die Haupteingabe / "new-todo" (rot im Bild)
-
Der enthaltene Körper der Todo-Liste + die
mark-all-complete
Schaltfläche (lila im Bild)- Die
mark-all-complete Schaltfläche
, explizit hervorgehoben aus unten angegebenen Gründen (gelb im Bild) - Jedes Todo ist eine einzelne Komponente (grün im Bild)
- Die
-
Die Fußzeile (blau im Bild)
Etwas Seltsames, das zu beachten ist, ist, dass das mark-all-complete
-Kontrollkästchen (markiert in gelb), obwohl es sich im "Haupt"-Abschnitt befindet, neben der "new-todo"-Eingabe gerendert wird. Dies liegt daran, dass das Standard-CSS das Kontrollkästchen + Label mit negativen Top- und Left-Werten absolut positioniert, um es neben die Eingabe zu verschieben, anstatt es innerhalb des "Haupt"-Abschnitts zu platzieren.
Verwendung der CLI, um unsere Komponenten für uns zu erstellen
Um unsere App zu repräsentieren, möchten wir 4 Komponenten erstellen:
- Header
- Liste
- Einzelnes Todo
- Footer
Um eine Komponente zu erstellen, verwenden wir den Befehl ember generate component
, gefolgt vom Namen der Komponente. Erstellen wir zuerst die Header-Komponente. Dazu:
-
Stoppen Sie den laufenden Server, indem Sie zum Terminal gehen und Ctrl + C drücken.
-
Geben Sie folgenden Befehl in Ihr Terminal ein:
bashember generate component header
Dadurch werden einige neue Dateien generiert, wie in der resultierenden Terminalausgabe gezeigt:
installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` installing component-test create tests/integration/components/header-test.js
header.hbs
ist die Vorlagendatei, in der wir die HTML-Struktur nur für diese Komponente einfügen werden. Später fügen wir die erforderliche dynamische Funktionalität wie Datenbindungen, Reaktionen auf Benutzerinteraktionen usw. hinzu.
Hinweis: Die header.js
-Datei (als übersprungen angezeigt) dient zur Verbindung mit einer unterstützenden Glimmer Component Class, die wir momentan nicht benötigen, da sie für die Interaktivität und Zustandsmanipulation gedacht sind. Standardmäßig generiert generate component
nur Template-Komponenten, da in großen Anwendungen Template-Komponenten den Großteil der Komponenten ausmachen.
header-test.js
ist für das Schreiben automatisierter Tests gedacht, um sicherzustellen, dass unsere App im Laufe der Zeit weiterhin funktioniert, während wir Erweiterungen, Funktionen und Refaktorierungen hinzufügen. Testing liegt außerhalb des Umfangs dieses Tutorials, obwohl Testing im Allgemeinen bereits bei der Entwicklung implementiert werden sollte, anstatt nachträglich, da es sonst oft in Vergessenheit gerät. Wenn Sie sich für Testing interessieren oder wissen möchten, warum Sie automatisierte Tests haben sollten, schauen Sie sich das offizielle Ember-Tutorial zum Testing an.
Bevor wir irgendeinen Komponentencode hinzufügen, erstellen wir das Gerüst für die anderen Komponenten. Geben Sie die folgenden Zeilen nacheinander in Ihr Terminal ein:
ember generate component todo-list
ember generate component todo
ember generate component footer
Nun sehen Sie Folgendes in Ihrem todomvc/app/components
Verzeichnis:
Jetzt, da wir alle unsere Komponentendateien haben, können wir das HTML für jede Komponente aus der application.hbs
Datei ausschneiden und in jede dieser Komponenten einfügen, und dann die application.hbs
neu schreiben, um unsere neuen Abstraktionen widerzuspiegeln.
-
Die
header.hbs
Datei sollte folgendermaßen aktualisiert werden:html<input class="new-todo" aria-label="What needs to be done?" placeholder="What needs to be done?" autofocus />
-
todo-list.hbs
sollte mit diesem Codeausschnitt aktualisiert werden:html<section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox" /> <label for="mark-all-complete">Mark all as complete</label> <ul class="todo-list"> <Todo /> <Todo /> </ul> </section>
Hinweis: Das einzige nicht-HTML in diesem neuen
todo-list.hbs
ist die<Todo />
Komponentenaufruf. In Ember ist ein Komponentenaufruf ähnlich wie die Deklaration eines HTML-Elements, aber der erste Buchstabe beginnt mit einem Großbuchstaben und die Namen werden im Upper Camel Case geschrieben, wie Sie es später bei<TodoList />
sehen werden. Der Inhalt dertodo.hbs
Datei unten wird<Todo />
auf der gerenderten Seite ersetzen, wenn unsere Anwendung geladen wird. -
Fügen Sie Folgendes in die
todo.hbs
Datei ein:html<li> <div class="view"> <input aria-label="Toggle the completion of this todo" class="toggle" type="checkbox" /> <label>Buy Movie Tickets</label> <button type="button" class="destroy" title="Remove this todo"></button> </div> <input autofocus class="edit" value="Todo Text" /> </li>
-
footer.hbs
sollte aktualisiert werden, um Folgendes zu enthalten:html<footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">All</a> <a href="#">Active</a> <a href="#">Completed</a> </li> </ul> <button type="button" class="clear-completed">Clear Completed</button> </footer>
-
Schließlich sollten die Inhalte von
application.hbs
so aktualisiert werden, dass sie die entsprechenden Komponenten aufrufen:hbs<section class="todoapp"> <h1>todos</h1> <Header /> <TodoList /> <Footer /> </section>
-
Mit diesen Änderungen führen Sie erneut
npm start
in Ihrem Terminal aus und gehen dann zuhttp://localhost:4200
, um sicherzustellen, dass die todo app immer noch genauso aussieht wie vor dem Refaktorieren.
Beachten Sie, dass die Todo-Elemente beide "Kinokarten kaufen" sagen - dies liegt daran, dass dieselbe Komponente zweimal aufgerufen wird und der Todo-Text hartcodiert ist. In dem nächsten Artikel werden wir uns damit beschäftigen, wie man unterschiedliche Todo-Elemente anzeigt!