Mobile- und Weblösungen

Im letzten Teil haben wir unsere erste Web Component mit LitElement gebaut, in diesem Teil werden wir uns mit Properties und Attributes beschäftigen, um den Zustand unserer Web Component abzubilden. Dieser Beitrag ist Teil einer Serie:

Wenn wir ein beliebiges HTMLElement nutzen, konfigurieren wir es über Attribute, oder Attributes:

Aus diesem Markup generiert der Browser Instanzen der HTMLElemente. Diese Instanzen besitzen dann Eigenschaften, sogenannte Properties. Diese werden mit den Werten der Attributes aus dem Markup vorbelegt.

Folgendes Beispiel illustriert dies:

Der Wert der placeholder Property ist identisch zum Wert des Attributes placeholder.

Properties und Attributes mit LitElement

LitElement nutzt Properties, um ein Element zu aktualisieren, d. h., wenn sich die Property ändert, wird ein Update des Elements und wenn nötig ein erneutes Rendering durchgeführt. Gleichzeitig bietet LitElement die Möglichkeit ein korrespondierendes Attribute für eine Property zu definieren.

Um eine Property zu definieren, gibt es zwei Möglichkeiten:

Den statischen properties getter
Die Decorator @property und @internalProperty

Der properties getter wird in einer LitElement Klasse definiert und hat folgende Signatur:

Das Properties Objekt hat als Keys die Namen der Properties. Die Werte des Objektes sind ihrerseits Objekte und können unter anderem folgende Einträge besitzen:

Eintrag	Mögliche Werte	Beschreibung
type	String, Number, Boolean, Array oder Object	Gibt den Typ des Wertes der Property an. LitElement nimmt automatisch die Konvertierung vom Attribute zur Property vor (inklusive Serialisierung & Deserialisierung)
attribute	Ein beliebiger String oder false	Gibt den Namen des zugehörigen Attributes an. Der Standardwert ist der Propertyname in Kleinbuchstaben
hasChanged	Eine Funktion, die den alten und neuen Wert als Parameter entgegen nimmt	Mithilfe dieser Funktion entscheidet LitElement, ob sich der Wert der Property geändert hat. Standardmäßig wird dies anhand der Referenz geprüft (direct comparision)

Die komplette Liste findet sich auf der LitElement Website.

Wenn wir jetzt eine Property vorname für ein Element definieren wollen, so können wir dies wie folgt tun:

Wir müssen nur den Typ der Property definieren, damit LitElement die Konvertierung des Attributes vorname in die Property vornehmen kann.

Unsere Property zeigt jetzt auf das Feld vorname. Den Standardwert unserer Property können wir im Konstruktor mit festlegen, indem wir this.vorname einen Wert zuweisen. Gleichzeitig können wir this.vorname in Templates verwenden.

Das folgende Beispiel zeigt, wie wir diese Property in einem Element nutzen können:

Unsere Property können wir über das Attribute vorname manipulieren.

Property mit @property Decorator definieren

Es gibt noch einen zweiten Weg eine Property zu definieren: den @property Decorator. Decorators sind ein neues JavaScript-Feature, welches sich zurzeit im Standardisierungsprozess befindet. Mit TypeScript und Babel kann man Decorators jedoch schon heute nutzen.

Der Decorator kann direkt aus dem Package lit-element importiert werden und direkt am Klassenfeld definiert werden:

Das Objekt mit den übergebenen Optionen ist identisch zum statischen properties getter. Wichtig: Auch hier müssen wir den Typ angeben, leider steht die statische Typisierung von TypeScript LitElement zur Laufzeit nicht zur Verfügung.

Folgendes Beispiel illustriert die Nutzung des Decorators zur Definition einer Property vorname:

Das Resultat des Beispiels ist identisch zum properties getter Beispiel.

Jetzt wo wir ein Element mit Attributes und Properties definieren können, werden wir uns im nächsten Teil der Serie mit Events beschäftigen.

Dieser Beitrag ist Teil einer Serie: