JavaScript-Framework: Ember 3.11 vereinfacht das Event-Handling
Neben einem Modifier zum Behandeln von DOM-Events bringt das Framework einen Helper zur vereinfachten Parameterübergabe.
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)