Ember Interaktivität: Events, Klassen und Zustand

Nun haben wir eine überarbeitete, komponentenbasierte Version unserer Todo-App. Lassen Sie uns durchgehen, wie wir die Interaktivität hinzufügen können, die wir benötigen, um die App funktionsfähig zu machen.

Wenn Sie beginnen, über Interaktivität nachzudenken, ist es gut, zu deklarieren, welche Ziele und Verantwortlichkeiten jede Komponente hat. In den untenstehenden Abschnitten werden wir dies für jede Komponente tun und Sie dann durch die Implementierung der Funktionalität führen.

Für unsere Karteikopf-/Todo-Eingabe möchten wir in der Lage sein, unsere eingegebene Todo-Aufgabe abzuschicken, wenn wir die Enter-Taste drücken, und sie soll in der Todo-Liste erscheinen.

Wir möchten den in das Eingabefeld eingegebenen Text erfassen. Dies tun wir, damit unser JavaScript-Code weiß, was wir eingegeben haben, und wir unser Todo speichern und diesen Text an die Todo-Listen-Komponente zur Anzeige weitergeben können.

Wir können das keydown Event über den on modifier erfassen, der einfach syntaktischer Zucker von Ember für addEventListener und removeEventListener ist (siehe Einführung in Events, falls benötigt).

Fügen Sie die neue Zeile, wie unten gezeigt, zu Ihrer header.hbs Datei hinzu:

<input
  class='new-todo'
  aria-label='What needs to be done?'
  placeholder='What needs to be done?'
  autofocus
  {{on 'keydown' this.onKeyDown}}
>

Dieses neue Attribut steht innerhalb von doppelten geschweiften Klammern, was anzeigt, dass es Teil der dynamischen Templetensyntax von Ember ist. Das erste Argument, das an on übergeben wird, ist der Eventtyp, auf den reagiert werden soll (keydown), und das letzte Argument ist der Event-Handler — der Code, der als Reaktion auf das Auslösen des keydown-Events ausgeführt wird. Wie Sie es vielleicht von der Arbeit mit JavaScript-Objekten kennen, bezieht sich das Schlüsselwort this auf den "Kontext" oder den "Bereich" der Komponente. Das this einer Komponente wird sich von dem this einer anderen Komponente unterscheiden.

Wir können definieren, was innerhalb von this verfügbar ist, indem wir eine Komponentenklasse generieren, die zu Ihrer Komponente passt. Dies ist eine normale JavaScript-Klasse und hat keine besondere Bedeutung für Ember, abgesehen davon, dass von der Component-Superklasse geerbt wird.

Um eine Header-Klasse für Ihre Header-Komponente zu erstellen, geben Sie dies in Ihr Terminal ein:

ember generate component-class header

Dies wird die folgende leere Klassendatei erstellen — todomvc/app/components/header.js:

import Component from "@glimmer/component";

export default class HeaderComponent extends Component {}

In dieser Datei werden wir den Code des Event-Handlers implementieren. Aktualisieren Sie den Inhalt wie folgt:

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class HeaderComponent extends Component {
  @action
  onKeyDown({ target, key }) {
    let text = target.value.trim();
    let hasValue = Boolean(text);

    if (key === "Enter" && hasValue) {
      alert(text);

      target.value = "";
    }
  }
}

Der @action-Dekorator ist hier der einzige Ember-spezifische Code (abgesehen vom Erben von der Component-Superklasse und den Ember-spezifischen Elementen, die wir mit JavaScript-Modulsyntax importieren) — der Rest der Datei ist normales JavaScript und würde in jeder Anwendung funktionieren. Der @action-Dekorator gibt an, dass die Funktion eine "Aktion" ist, was bedeutet, dass es sich um eine Art Funktion handelt, die von einem Event im Template aus aufgerufen wird. @action bindet auch das this der Funktion an die Klasseninstanz.

Kehren wir zu unserem Browsertab zurück, in dem die App ausgeführt wird. Wir können jetzt alles eingeben, und wenn wir Enter drücken, wird uns eine Meldung angezeigt, die uns genau sagt, was wir eingegeben haben.

Mit der Interaktivität der Header-Eingabe aus dem Weg brauchen wir einen Ort, an dem die Todos gespeichert werden, damit andere Komponenten darauf zugreifen können.

Ember hat eine eingebaute anwendungsweite Zustandsverwaltung, die wir nutzen können, um die Speicherung unserer Todos zu verwalten und es jeder unserer Komponenten zu ermöglichen, Daten aus diesem anwendungsweiten Zustand zu beziehen. Ember nennt diese Konstrukte Services, und sie bestehen während der gesamten Laufzeit der Seite (ein Seiten-Refresh wird sie löschen; die Daten längerfristig zu speichern geht über den Rahmen dieses Tutorials hinaus).

Führen Sie diesen Terminalbefehl aus, um einen Service zu generieren, in dem wir unsere Todo-Listendaten speichern:

ember generate service todo-data

Dies sollte Ihnen eine Terminalausgabe wie folgt geben:

installing service
  create app/services/todo-data.js
installing service-test
  create tests/unit/services/todo-data-test.js

Dies erstellt eine todo-data.js Datei im Verzeichnis todomvc/app/services, die unseren Service enthält, zunächst mit einer Import-Anweisung und einer leeren Klasse:

import Service from "@ember/service";

export default class TodoDataService extends Service {}

Zuerst möchten wir definieren, was ein Todo ist. Wir wissen, dass wir sowohl den Text eines Todos als auch den Status, ob es abgeschlossen ist oder nicht, nachverfolgen wollen.

Fügen Sie die folgende import-Anweisung unter der bestehenden ein:

import { tracked } from "@glimmer/tracking";

Fügen Sie nun die folgende Klasse unter der von Ihnen zuvor eingefügten Zeile hinzu:

class Todo {
  @tracked text = "";
  @tracked isCompleted = false;

  constructor(text) {
    this.text = text;
  }
}

Diese Klasse repräsentiert ein Todo — sie enthält eine @tracked text Eigenschaft, die den Text des Todos enthält, und eine @tracked isCompleted Eigenschaft, die angibt, ob das Todo abgeschlossen wurde oder nicht. Beim Erstellen wird ein Todo-Objekt einen anfänglichen text-Wert haben, der dem Text entspricht, der ihm bei der Erstellung gegeben wurde (siehe unten), und einen isCompleted-Wert von false. Der einzige Ember-spezifische Teil dieser Klasse ist der @tracked-Dekorator — dieser verbindet sich mit dem Reaktivitätssystem und ermöglicht es Ember, automatisch zu aktualisieren, was Sie in Ihrer App sehen, wenn sich die verfolgten Eigenschaften ändern. Weitere Informationen zu tracked finden Sie hier.

Nun ist es an der Zeit, den Servicekörper zu ergänzen.

Zuerst fügen Sie eine weitere import-Anweisung unter der vorherigen ein, um Aktionen innerhalb des Services verfügbar zu machen:

import { action } from "@ember/object";

Aktualisieren Sie den bestehenden export default class TodoDataService extends Service { } Block wie folgt:

export default class TodoDataService extends Service {
  @tracked todos = [];

  @action
  add(text) {
    let newTodo = new Todo(text);

    this.todos = [...this.todos, newTodo];
  }
}

Hier wird die todos Eigenschaft im Service unsere Liste von Todos in einem Array pflegen, und wir markieren sie mit @tracked, weil wir möchten, dass die UI aktualisiert wird, wenn der Wert von todos aktualisiert wird.

Und wie zuvor wird die add()-Funktion, die aus dem Template aufgerufen wird, mit dem @action-Dekorator annotiert, um sie an die Klasseninstanz zu binden. Wir verbreiten unser todos-Array, um newTodo hinzuzufügen, was ein neues Array erstellt und das Reaktivitätssystem auslöst, die UI zu aktualisieren.

Da wir nun eine Methode definiert haben, um Todos hinzuzufügen, können wir mit diesem Service von der header.js-Eingabekomponente aus interagieren, um tatsächlich damit zu beginnen, sie hinzuzufügen.

Zuerst muss der Service über den @inject-Dekorator in das Template eingefügt werden, den wir zur begrifflichen Klarheit in @service umbenennen. Fügen Sie dazu die folgende import-Zeile in header.js unter den beiden bestehenden import-Zeilen hinzu:

import { inject as service } from "@ember/service";

Mit diesem Import können wir nun den todo-data-Service innerhalb der HeaderComponent-Klasse über das todos-Objekt verfügbar machen, indem wir den @service-Dekorator verwenden. Fügen Sie die folgende Zeile direkt unter der öffnenden export…-Zeile hinzu:

export default class HeaderComponent extends Component {
  @service("todo-data") todos;
  // …
}

Die Platzhalterzeile alert(text); kann nun durch einen Aufruf unserer neuen add()-Funktion ersetzt werden. Ersetzen Sie ihn durch Folgendes:

this.todos.add(text);

Wenn wir dies in der Todo-App in unserem Browser ausprobieren (npm start, gehen Sie zu localhost:4200), sieht es so aus, als würde nichts passieren, nachdem Sie die Enter-Taste drücken (obwohl die Tatsache, dass die App ohne Fehler erstellt wird, ein gutes Zeichen ist). Mit dem Ember Inspector können wir jedoch sehen, dass unser Todo hinzugefügt wurde:

Da wir nun wissen, dass wir Todos erstellen können, muss es eine Möglichkeit geben, unsere statischen "Buy Movie Tickets" Todos gegen die auszutauschen, die wir tatsächlich erstellen. In der TodoList-Komponente möchten wir die Todos aus dem Service abrufen und eine Todo-Komponente für jedes verfügbare Todo rendern.

Um die Todos aus dem Service abzurufen, benötigt unsere TodoList-Komponente zuerst eine unterstützende Komponentensklasse, die diese Funktionalität enthält. Drücken Sie Ctrl + C, um den Entwicklungsserver zu stoppen, und geben Sie den folgenden Terminalbefehl ein:

ember generate component-class todo-list

Dies generiert die neue Komponentensklasse todomvc/app/components/todo-list.js.

Füllen Sie diese Datei mit folgendem Code aus, der den todo-data-Service über die todos-Eigenschaft für unser Template zugänglich macht. Dies macht ihn sowohl innerhalb der Klasse als auch im Template über this.todos zugänglich:

import Component from "@glimmer/component";
import { inject as service } from "@ember/service";

export default class TodoListComponent extends Component {
  @service("todo-data") todos;
}

Ein Problem hierbei ist, dass unser Service todos genannt wird, aber die Liste der Todos ebenfalls todos genannt wird, sodass wir derzeit auf die Daten über this.todos.todos zugreifen würden. Dies ist nicht intuitiv, also fügen wir einen Getter zum todos-Service hinzu, der all genannt wird und alle Todos repräsentiert.

Um dies zu tun, gehen Sie zurück zu Ihrer todo-data.js-Datei und fügen Sie Folgendes unter der @tracked todos = [];-Zeile hinzu:

export default class TodoDataService extends Service {
  @tracked todos = [];

  get all() {
    return this.todos;
  }
  // …
}

Nun können wir auf die Daten mit this.todos.all zugreifen, was viel intuitiver ist. Um dies in Aktion zu setzen, gehen Sie zu Ihrer todo-list.hbs Komponente und ersetzen Sie die statischen Komponentenaufrufe:

<Todo />
<Todo />

Durch einen dynamischen #each-Block (was im Wesentlichen syntaktischer Zucker über JavaScripts forEach() ist), der eine <Todo />-Komponente für jedes verfügbare Todo in der Liste der vom Service zurückgegebenen Todos erstellt:

{{#each this.todos.all as |todo|}}
<Todo @todo={{todo}} />
{{/each}}

Eine andere Möglichkeit, dies zu betrachten:

• this — der Darstellungs-Kontext/Klasseninstanz der Komponente.
• todos — eine Eigenschaft auf this, die wir in der todo-list.js-Komponente mit @service('todo-data') todos; definiert haben. Dies ist eine Referenz auf den todo-data-Service, die es uns ermöglicht, direkt mit der Serviceinstanz zu interagieren.
• all — ein Getter auf dem todo-data-Service, der alle Todos zurückgibt.

Versuchen Sie, den Server erneut zu starten, und navigieren Sie zu unserer App, und Sie werden feststellen, dass sie funktioniert! Nun, fast. Jedes Mal, wenn Sie ein neues Todo-Element eingeben, erscheint ein neues Listenelement unterhalb des Texteingabefelds, aber leider steht dort immer "Buy Movie Tickets".

Dies liegt daran, dass das Textlabel innerhalb jedes Listenelements auf diesen Text festkodiert ist, wie in todo.hbs zu sehen ist:

<label>Buy Movie Tickets</label>

Aktualisieren Sie diese Zeile, um das Argument @todo zu verwenden — das wird das Todo darstellen, das wir in dieser Komponente übergeben haben, als es in todo-list.hbs aufgerufen wurde, in der Zeile <Todo @todo={{todo}} />:

<label>{{@todo.text}}</label>

OK, versuchen Sie es erneut. Sie sollten feststellen, dass der im <input> übermittelten Text jetzt korrekt in der UI angezeigt wird:

OK, das ist ein großer Fortschritt für den Moment. Wir können jetzt Todo-Elemente zu unserer App hinzufügen, und der Zustand der Daten wird mit unserem Service nachverfolgt. Als Nächstes fahren wir fort, die Funktionalität unseres Footers zu aktivieren, einschließlich des Todo-Zählers, und betrachten bedingtes Rendern, einschließlich der richtigen Gestaltung von Todos, wenn sie überprüft wurden. Wir werden auch unseren "Clear completed"-Button einbinden.

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