JavaScript-Framework: Ember 3.11 vereinfacht das Event-Handling

Inhaltsverzeichnis

Das Team hinter Ember hat Version 3.11 des JavaScript-Frameworks veröffentlicht. Das Release führt einen neuen Helper {{fn}} zur Übergabe von Parametern an Aktionen und den Modifier {{on}} zum Behandeln von DOM-Events ein. Außerdem ist die Library für Datenpersistenz, Ember Data, nun in kleinere Pakete aufgeteilt, und in künftigen Releases sollen einige der Pakete optional werden.

Der neu eingeführte {{fn}}-Helper arbeitet im Zusammenspiel mit dem @action-Dekorator grundsätzlich auf dieselbe Weise wie der {{action}}-Helper, der aber wohl in einigen Fällen zu unerwarteten Ergebnissen führen kann. Daher hat das Team den neuen Helper eingeführt und empfiehlt ihn explizit. Wer den {{action}}-Helper verwendet, sollte den Code auf {{fn}} umstellen.

Einfache Parameterübergabe

Der Helper dient der Übergabe von Parametern an Aktionen vor allem im Zusammenspiel mit nativen Klassen und dem @action-Dekorator. Letzterer stellt sicher, dass sich this stets auf die Instanz der Komponente bezieht. So lässt sich in folgendem Beispiel aus dem Ember-Blog die Komponente wahlweise ohne Parameter aufrufen, um den Zähler um eins zu erhöhen, oder mit Parameter, um diesen zum Zähler hinzuzufügen:

class CounterComponent extends Component {
  count = 0;

  @action
  countUp(increment = 1) {
    this.incrementProperty("count", increment);
  }
}

Durch {{fn}} lässt sich die Übergabe eines Parameters beispielsweise direkt in @click einbinden:

Current count: {{this.count}}

{{!-- calls this.countUp(10) when clicked --}}
<MyButton @click={{fn this.countUp 10}}>Add Ten</MyButton>

Darüber hinaus ermöglicht der {{fn}}-Helper das Hinzufügen weiterer Parameter zu vorhandenen Funktionen.

Ereignisreiche Elemente

Ebenfalls neu ist der Modifier {{on}} für das Behandeln von DOM-Events in beliebigen Elementen. So ruft folgender Event-Handler im Button die Funktion countUp auf:

<button {{on "click" this.countUp passive=true}}>Add One</button>

Standardmäßig übergibt der {{on}}-Modifier das DOM-Event als Argument, aber Entwickler können den neuen Helper {{fn}} verwenden, um angepasste Parameter zu übergeben. Anstelle von passive lassen sich capture oder once zum Festlegen der Art des Event-Handlers nutzen, die Ember als Option an addEventListener weiterreicht.

Normalisierung und Attributübergabe

Außerdem hat das Team den Konstruktor einiger Basisklassen von Ember vereinheitlicht, sodass er stets owner als ersten Parameter erwartet und die Methode setOwner aufruft. Die Anpassung gilt für die Framework-Klassen GlimmerComponent, EmberComponent, Service, Route, Controller und Helper sowie die Ember-Data-Klassen Model, Adapter, Serializer und Transform.

Ember 3.11 bringt zudem das sogenannte Splattributes-Feature zur Übergabe von HTML-Attributen an Komponenten über die Syntax < ...attributes>. Erwähnenswert ist zudem, dass Function.prototype.observes nun als überholt (deprecated) gilt.

Weitere Neuerungen und Anpassungen lassen sich dem Ember-Blog entnehmen. Die vollständige Liste der Änderungen findet sich im Changelog. (rme)