Ember-App-Struktur und Komponentenbildung

Im letzten Artikel haben wir ein neues Ember-Projekt eingerichtet und dann 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 Startseite unserer Anwendung ist in app/templates/application.hbs definiert. Diese Datei existiert bereits, und ihr aktueller Inhalt sieht folgendermaßen aus:

{{!-- The following component displays Ember's default welcome message. --}}
<WelcomePage />
{{!-- Feel free to remove this! --}}

{{outlet}}

<WelcomePage /> ist eine von einem Ember-Addon bereitgestellte Komponente, die die standardmäßige Willkommensseite rendert, die wir im vorherigen Artikel gesehen haben, als wir zuerst zu unserem Server unter localhost:4200 navigierten.

Aber das wollen wir nicht. Stattdessen soll es die Struktur der TodoMVC-App enthalten. Löschen Sie zunächst den Inhalt von application.hbs und ersetzen Sie ihn durch Folgendes:

<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>

Wenn Sie application.hbs speichern, wird der zuvor gestartete Entwicklungsserver die App automatisch neu erstellen und den Browser aktualisieren. Die gerenderte Ausgabe sollte jetzt folgendermaßen aussehen:

Es erfordert nicht viel Aufwand, um unser HTML wie eine voll funktionsfähige To-Do-Listen-App aussehen zu lassen. Aktualisieren Sie die Datei application.hbs erneut, sodass ihr Inhalt so 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. Jetzt müssen wir unseren HTML-Code in dynamische Komponenten aufteilen; später werden wir ihn in eine voll interaktive App umwandeln.

Beim Blick auf den Code neben der gerenderten Todo-App gibt es mehrere Möglichkeiten, die UI aufzuteilen, aber planen wir, das HTML in folgende Komponenten zu unterteilen:

Die Komponentengruppierungen sind wie folgt:

• Das Haupteingabefeld / "new-todo" (rot im Bild)

• Der umgebende Körper der To-Do-Liste + die mark-all-complete-Schaltfläche (lila im Bild)

  • Die explizit hervorgehobene mark-all-complete-Schaltfläche aus unten genannten Gründen (gelb im Bild)
  • Jedes Todo ist eine individuelle Komponente (grün im Bild)

• Der Fußbereich (blau im Bild)

Etwas Merkwürdiges zu beachten ist, dass das mark-all-complete-Kontrollkästchen (gelb markiert), während es sich im "main"-Abschnitt befindet, neben dem "new-todo"-Eingabefeld gerendert wird. Dies liegt daran, dass das Standard-CSS das Kontrollkästchen + Label mit negativen oberen und linken Werte absolut positioniert, um es neben das Eingabefeld zu verschieben, anstatt es im "main"-Abschnitt einzufügen.

Um unsere App darzustellen, möchten wir 4 Komponenten erstellen:

• Header
• Liste
• Einzelnes Todo
• Fußbereich

Um eine Komponente zu erstellen, verwenden wir den Befehl ember generate component gefolgt vom Namen der Komponente. Erstellen wir zuerst die Header-Komponente. Dafür:

1. Stoppen Sie den laufenden Server, indem Sie im Terminal Ctrl + C drücken.

2. Geben Sie den folgenden Befehl in Ihr Terminal ein:

   bash

   ember generate component header
   

   Dies wird einige neue Dateien generieren, wie im resultierenden Terminalausgang angezeigt:

   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 werden wir die erforderlichen dynamischen Funktionen wie Datenbindungen, das Reagieren auf Benutzerinteraktionen usw. hinzufügen.

header-test.js ist für das Schreiben automatisierter Tests, um sicherzustellen, dass unsere App weiterhin funktioniert, während wir Upgrades durchführen, Funktionen hinzufügen, refaktorisieren usw. Tests sind außerhalb des Umfangs dieses Tutorials, obwohl Tests im Allgemeinen während der Entwicklung implementiert werden sollten, nicht danach, da sie sonst oft vergessen werden. Wenn Sie neugierig auf Tests sind oder wissen möchten, warum Sie automatisierte Tests haben möchten, schauen Sie sich das offizielle Ember-Tutorial zu Tests an.

Bevor wir mit dem Hinzufügen von Komponenten-Code beginnen, erstellen wir das Gerüst für die anderen Komponenten. Geben Sie nacheinander die folgenden Zeilen in Ihr Terminal ein:

ember generate component todo-list
ember generate component todo
ember generate component footer

Sie werden jetzt das Folgende in Ihrem todomvc/app/components-Verzeichnis sehen:

Jetzt, da wir alle unsere Komponentenstrukturdateien haben, können wir das HTML für jede Komponente aus der Datei application.hbs ausschneiden und in jede dieser Komponenten einfügen und dann die application.hbs neu schreiben, um unsere neuen Abstraktionen widerzuspiegeln.

1. Die Datei header.hbs sollte auf den folgenden Inhalt aktualisiert werden:

   html

   <input
     class="new-todo"
     aria-label="What needs to be done?"
     placeholder="What needs to be done?"
     autofocus />
   

2. todo-list.hbs sollte aktualisiert werden, um diesen Codeabschnitt zu enthalten:

   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 dieser neuen todo-list.hbs ist der <Todo />-Komponentenaufruf. In Ember ist ein Komponentenaufruf ähnlich wie das Deklarieren eines HTML-Elements, aber der erste Buchstabe beginnt mit einem Großbuchstaben, und die Namen werden in upper camel case geschrieben, wie Sie später bei <TodoList /> sehen werden. Der Inhalt der Datei todo.hbs unten wird <Todo /> auf der gerenderten Seite ersetzen, wenn unsere Anwendung geladen wird.

3. Fügen Sie dies in die Datei todo.hbs 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>
   

4. footer.hbs sollte aktualisiert werden, um den folgenden Inhalt 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>
   

5. Abschließend sollte der Inhalt von application.hbs so aktualisiert werden, dass er die entsprechenden Komponenten aufruft, wie folgt:

   hbs

   <section class="todoapp">
     <h1>todos</h1>
   
     <Header />
     <TodoList />
     <Footer />
   </section>
   

6. Mit diesen Änderungen führen Sie erneut npm start in Ihrem Terminal aus und gehen dann zu http://localhost:4200, um sicherzustellen, dass die Todo-App noch so aussieht wie vor der Umstrukturierung.

Beachten Sie, dass die Todo-Elemente beide "Buy Movie Tickets" sagen — das liegt daran, dass dieselbe Komponente zweimal aufgerufen wird und der Todo-Text fest in sie eingefügt ist. Wir werden uns im nächsten Artikel ansehen, wie man unterschiedliche Todo-Items anzeigt!

Großartig! Alles sieht so aus, wie es sollte. Wir haben erfolgreich unser HTML in Komponenten umstrukturiert! Im nächsten Artikel werden wir anfangen, Interaktivität zu unserer Ember-Anwendung hinzuzufügen.

• Zurück
• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter