Weniger Gepäck (wie mit AlpineJS) ist in manchen Situationen die bessere Wahl.Taras Hipp | shutterstock.com Auf mehrtägigen Outdoor-Trips stellt man sich schnell die Frage, ob sich manche Gepäckstücke eigentlich rechtfertigen. Das verhält sich mit den Entscheidungen, die im Rahmen des Softwareentwicklungsprozesses zu treffen sind, ganz ähnlich: Jede neue Systemkomponente birgt zusätzliche Komplexität, weshalb sich auch jede einzelne am Ende bezahlt machen sollte. Dass weniger oft mehr ist, beweist auch Alpine.js als die Option für Minimalisten unter den JavaScript-Frameworks. Das Rahmenwerk bietet eine beeindruckende Funktionsbandbreite – bei einem sehr überschaubaren Footprint. Dieses Tutorial behandelt die Grundlagen von AlpineJS anhand einiger Beispiele. Sämtlichen Code in diesem Artikel finden Sie auch auf GitHub. Die Minimal-API von AlpineJS Wie in der Dokumentation nachzulesen ist, besteht AlpineJS aus einer Kollektion von: 15 Attributen, sechs Eigenschaften und zwei Methoden. Diese überschaubare API realisiert ein simplifiziertes Reactivity-Paket, das mit einigen praktischen Extras wie Eventing und einem Store garniert ist. Eine einfache Webseite: Abgesehen von der Einbindung des Alpine-Pakets über CDN sind die einzigen Alpine-bezogenen Dinge in diesem Beispiel die beiden Direktiven x-data und x-text. Wenn Sie den Beispielcode in eine HTML-Seite auf Ihrem System einfügen und im Browser anzeigen, sehen Sie die Nachricht „Text literal“. Das ist wenig beeindruckend, demonstriert aber zwei interessante Fakten in Zusammenhang mit AlpineJS: Damit die Reactivity greift, müssen Sie das Markup in eine x-data-Direktive einschließen. Wird letztere entfernt, bleibt x-text wirkungslos. Die x-data-Direktive erstellt also eine Alpine-Komponente. In diesem Fall ist die Direktive leer – in der Praxis ist das in den allermeisten Fällen nicht so. Schließlich geht es um Komponenten, deren Zweck es ist, auf diese Daten zu „reagieren“. Lässt sich jeder gültige JavaScript-Code in x-text einfügen – was für alle Alpine-Direktiven gilt. Die x-text-Property verbindet HTML (die Ansicht) und JavaScript (das Verhalten). Alpine & HTMX Um seine Funktionalität zu definieren, nutzt AlpineJS HTML-Attribute. Insofern ähnelt es in gewisser Weise HTMX. Trotzdem sich die beiden Technologien voneinander unterscheiden, nutzen beide mit x-prefix HTML-Extension-Properties, um gutes, altes HTML performanter zu machen. x-data- & x-text-Elemente nutzen Der Inhalt von x-data wird allen enthaltenen Elementen zur Verfügung gestellt. Für ein besseres Verständnis werfen Sie einen Blick auf folgenden Code: Der Output auf der Seite sind jetzt die ersten Worte der US-amerikanischen Unabhängigkeitserklärung. Wie Sie sehen, hat x-data ein simples, altes JavaScript-Objekt mit einem einzigen Feld definiert – „message“. Auf dieses Objektfeld, das die Präambel enthält, verweist x-text. Reactivity nutzen Um einen Fehler im Dokument zu beheben, nutzen wir im folgenden Beispiel Reactivity: Fix It In diesem Code bezieht sich die x-text-Direktive auf die Substantivvariable, die durch sie offengelegt wird. Neu ist die Schaltfläche (Button), die mit einer x-on:click-Direktive ausgestattet ist. Der Handler für diesen Click Event ersetzt das alte Default-Nomen („men“) durch das genderneutrale „people“. Darum, die Referenz in x-text zu aktualisieren, „kümmert“ sich die Reactivity. Die Benutzeroberfläche spiegelt die Änderungen automatisch wider. Funktionen in Daten Bei den Data Properties in AlpineJS handelt es sich um voll funktionsfähige JavaScript-Objekte. Mit diesem Wissen lässt sich die oben genannte Anforderung auch auf andere Weise erfüllen: Fix It Diesem Beispielcode ist zu entnehmen, dass das data-Objekt jetzt eine fixIt-Methode hostet, die vom Click Handler aufgerufen wird. Die Objektstruktur lässt sich dabei anpassen – je nachdem, wie sich das HTML verhalten soll. script vs. x-data Es kann vorkommen, dass Ihnen Code begegnet, der über die x-data -Direktive eine Funktion aufruft, die in einem script -Tag definiert ist. Das ist eine Frage des persönlichen Geschmacks, weil es genauso funktioniert, wie ein Inline- x-data: … … Remote-Daten abrufen Um die Anforderungen etwas nach oben zu schrauben, soll es im nächsten Beispiel darum gehen, eine JSON-formatierte Liste der US-Präsidenten über eine externe API zu laden. Im ersten Schritt sorgen wir dafür, dass diese geladen wird, sobald auch die Seite geladen wird. Dafür nutzen wir die x-init-Direktive: Mit Blick auf diesen Code ist zu sagen, dass die x-data-Direktive nun ein einfaches presidents-Feld mit einem leeren Array aufweist. Den Inhalt dieses Felds gibt x-text innerhalb des span-Elements aus. Der x-init-Part gestaltet sich etwas komplexer: Er ist in eine Self-Executing-Funktion eingeschlossen. Das liegt daran, dass AlpineJS eine Funktion erwartet – keine Funktionsdefinition. Sobald die Liste der Präsidenten vom Endpunkt abgerufen wurde, fügen wir sie der presidents-Variablen hinzu, die Alpine im Rahmen seines x-data-Objekts zur Verfügung gestellt hat. Iteration mit AlpineJS An diesem Punkt ruft die App die Daten vom Remote-Endpunkt ab und speichert sie. Allerdings liefert sie ungewollte Outputs wie [Object], [Object] …. Um dieses Problem zu beheben, müssen wir uns zunächst die Iteration über die Daten ansehen: From: Until: Dieser Code enthält eine normale, ungeordnete Liste sowie ein HTML-Vorlagenelement, das wiederum eine x-for-Direktive enthält. Diese funktioniert genauso wie in anderen reaktiven Frameworks und ermöglicht es, eine Collection und einen Identifier zu spezifizieren. Diese werden dem eingeschlossenen Markup zur Verfügung gestellt, das die jeweilige Instanz dieser Sammlung repräsentiert (in diesem Fall pres). Der Rest des Markups verwendet die pres-Variable, um über x-text Daten aus den Objekten auszugeben. Die App sieht nun in etwa wie im nachfolgenden Screenshot aus: loading=”lazy” width=”400px”>IDG Show/Hide & onClick Angenommen, wir möchten nun die Möglichkeit hinzufügen, auf die Daten für den jeweiligen Präsidenten umzuschalten, indem man auf dessen Namen klickt. Dazu würden wir das Markup wie folgt verändern: From: Until: In diesem Beispiel wenden wir die x-show-Direktive auf ein div an, das die Details des Präsidenten enthält. Ob der Inhalt sichtbar ist oder nicht, bestimmt die „Truthiness“ des x-show-Werts. In unserem Fall wird das durch das pres.show-Feld definiert. Um Daten und Verhalten besser voneinander zu isolieren, ist im Fall einer realen Anwendung davon abzuraten, Geschäftsdaten zu nutzen, um die show/hide-Variable zu hosten. Um den Wert von pres.show zu verändern, ergänzen wir den Header um einen x-on:click-Handler. Dieser tauscht einfach den true/false-Wert von pres.show: pres.show = ! pres.show. Übergangsanimation hinzufügen AlpineJS enthält integrierte „Transitions“, die sich auf die show-/hide-Funktion anwenden lassen. Eine Standardanimation fügen Sie folgendermaßen hinzu: From: Until: Geändert hat sich lediglich das Element, das die x-show-Direktive enthält – nun weist es außerdem eine x-transition-Anweisung auf. In diesem Fall kommt ein „Slide & Fade“-Effekt zum Einsatz. Sie können den Übergangseffekt jedoch umfassend anpassen – oder auch eigene CSS-Klassen einbringen. Tiefergehende Informationen zum Thema Transitions in AlpineJS hält die Dokumentation bereit. Binding an Inputs Im nächsten Schritt ergänzen wir eine simple Filterfunktion. Dazu ist es nötig, einen Input hinzuzufügen, der an die Daten gebunden wird und die zurückgegebenen Datensätze auf der Grundlage dieses Werts filtern: … Das x-data-Objekt weist nun ein „Filter“-Feld auf. Dieses ist über die x-model-Direktive bidirektional an das Eingabeelement gebunden und verweist auf “filter“. Wir haben die x-for-Direktive der Vorlage geändert, um auf eine neue getPresidents()-Methode zu verweisen, die im x-data-Objekt implementiert ist. Diese verwendet Standard-JavaScript-Syntax, um die Präsidenten danach zu filtern, ob ihr Filterfeld Text enthält. Die $dispatch-Direktive von AlpineJS Eventuell wirft die Kommunikation zwischen den Komponenten Fragen auf. AlpineJS verzichtet darauf, diese explizit zu „verdrahten“ – so gibt es beispielsweise keine parent-to-child-Properties. Stattdessen nutzt das Framework eine Browserumgebung (zum Beispiel das Fenster) über die $dispatch-Direktive als Event Bus. Das steht mit der AlpineJS-Philosophie in Einklang, nur so viel Funktionalität hinzuzufügen, wie nötig ist. (fm) Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!
AlpineJS-Tutorial
Weniger Gepäck (wie mit AlpineJS) ist in manchen Situationen die bessere Wahl.Taras Hipp | shutterstock.com Auf mehrtägigen Outdoor-Trips stellt man sich schnell die Frage, ob sich manche Gepäckstücke eigentlich rechtfertigen. Das verhält sich mit den Entscheidungen, die im Rahmen des Softwareentwicklungsprozesses zu treffen sind, ganz ähnlich: Jede neue Systemkomponente birgt zusätzliche Komplexität, weshalb sich auch jede einzelne am Ende bezahlt machen sollte. Dass weniger oft mehr ist, beweist auch Alpine.js als die Option für Minimalisten unter den JavaScript-Frameworks. Das Rahmenwerk bietet eine beeindruckende Funktionsbandbreite – bei einem sehr überschaubaren Footprint. Dieses Tutorial behandelt die Grundlagen von AlpineJS anhand einiger Beispiele. Sämtlichen Code in diesem Artikel finden Sie auch auf GitHub. Die Minimal-API von AlpineJS Wie in der Dokumentation nachzulesen ist, besteht AlpineJS aus einer Kollektion von: 15 Attributen, sechs Eigenschaften und zwei Methoden. Diese überschaubare API realisiert ein simplifiziertes Reactivity-Paket, das mit einigen praktischen Extras wie Eventing und einem Store garniert ist. Eine einfache Webseite: Abgesehen von der Einbindung des Alpine-Pakets über CDN sind die einzigen Alpine-bezogenen Dinge in diesem Beispiel die beiden Direktiven x-data und x-text. Wenn Sie den Beispielcode in eine HTML-Seite auf Ihrem System einfügen und im Browser anzeigen, sehen Sie die Nachricht „Text literal“. Das ist wenig beeindruckend, demonstriert aber zwei interessante Fakten in Zusammenhang mit AlpineJS: Damit die Reactivity greift, müssen Sie das Markup in eine x-data-Direktive einschließen. Wird letztere entfernt, bleibt x-text wirkungslos. Die x-data-Direktive erstellt also eine Alpine-Komponente. In diesem Fall ist die Direktive leer – in der Praxis ist das in den allermeisten Fällen nicht so. Schließlich geht es um Komponenten, deren Zweck es ist, auf diese Daten zu „reagieren“. Lässt sich jeder gültige JavaScript-Code in x-text einfügen – was für alle Alpine-Direktiven gilt. Die x-text-Property verbindet HTML (die Ansicht) und JavaScript (das Verhalten). Alpine & HTMX Um seine Funktionalität zu definieren, nutzt AlpineJS HTML-Attribute. Insofern ähnelt es in gewisser Weise HTMX. Trotzdem sich die beiden Technologien voneinander unterscheiden, nutzen beide mit x-prefix HTML-Extension-Properties, um gutes, altes HTML performanter zu machen. x-data- & x-text-Elemente nutzen Der Inhalt von x-data wird allen enthaltenen Elementen zur Verfügung gestellt. Für ein besseres Verständnis werfen Sie einen Blick auf folgenden Code: Der Output auf der Seite sind jetzt die ersten Worte der US-amerikanischen Unabhängigkeitserklärung. Wie Sie sehen, hat x-data ein simples, altes JavaScript-Objekt mit einem einzigen Feld definiert – „message“. Auf dieses Objektfeld, das die Präambel enthält, verweist x-text. Reactivity nutzen Um einen Fehler im Dokument zu beheben, nutzen wir im folgenden Beispiel Reactivity: Fix It In diesem Code bezieht sich die x-text-Direktive auf die Substantivvariable, die durch sie offengelegt wird. Neu ist die Schaltfläche (Button), die mit einer x-on:click-Direktive ausgestattet ist. Der Handler für diesen Click Event ersetzt das alte Default-Nomen („men“) durch das genderneutrale „people“. Darum, die Referenz in x-text zu aktualisieren, „kümmert“ sich die Reactivity. Die Benutzeroberfläche spiegelt die Änderungen automatisch wider. Funktionen in Daten Bei den Data Properties in AlpineJS handelt es sich um voll funktionsfähige JavaScript-Objekte. Mit diesem Wissen lässt sich die oben genannte Anforderung auch auf andere Weise erfüllen: Fix It Diesem Beispielcode ist zu entnehmen, dass das data-Objekt jetzt eine fixIt-Methode hostet, die vom Click Handler aufgerufen wird. Die Objektstruktur lässt sich dabei anpassen – je nachdem, wie sich das HTML verhalten soll. script vs. x-data Es kann vorkommen, dass Ihnen Code begegnet, der über die x-data -Direktive eine Funktion aufruft, die in einem script -Tag definiert ist. Das ist eine Frage des persönlichen Geschmacks, weil es genauso funktioniert, wie ein Inline- x-data: ... ... Remote-Daten abrufen Um die Anforderungen etwas nach oben zu schrauben, soll es im nächsten Beispiel darum gehen, eine JSON-formatierte Liste der US-Präsidenten über eine externe API zu laden. Im ersten Schritt sorgen wir dafür, dass diese geladen wird, sobald auch die Seite geladen wird. Dafür nutzen wir die x-init-Direktive: Mit Blick auf diesen Code ist zu sagen, dass die x-data-Direktive nun ein einfaches presidents-Feld mit einem leeren Array aufweist. Den Inhalt dieses Felds gibt x-text innerhalb des span-Elements aus. Der x-init-Part gestaltet sich etwas komplexer: Er ist in eine Self-Executing-Funktion eingeschlossen. Das liegt daran, dass AlpineJS eine Funktion erwartet – keine Funktionsdefinition. Sobald die Liste der Präsidenten vom Endpunkt abgerufen wurde, fügen wir sie der presidents-Variablen hinzu, die Alpine im Rahmen seines x-data-Objekts zur Verfügung gestellt hat. Iteration mit AlpineJS An diesem Punkt ruft die App die Daten vom Remote-Endpunkt ab und speichert sie. Allerdings liefert sie ungewollte Outputs wie [Object], [Object] .... Um dieses Problem zu beheben, müssen wir uns zunächst die Iteration über die Daten ansehen: From: Until: Dieser Code enthält eine normale, ungeordnete Liste sowie ein HTML-Vorlagenelement, das wiederum eine x-for-Direktive enthält. Diese funktioniert genauso wie in anderen reaktiven Frameworks und ermöglicht es, eine Collection und einen Identifier zu spezifizieren. Diese werden dem eingeschlossenen Markup zur Verfügung gestellt, das die jeweilige Instanz dieser Sammlung repräsentiert (in diesem Fall pres). Der Rest des Markups verwendet die pres-Variable, um über x-text Daten aus den Objekten auszugeben. Die App sieht nun in etwa wie im nachfolgenden Screenshot aus: loading="lazy" width="400px">IDG Show/Hide & onClick Angenommen, wir möchten nun die Möglichkeit hinzufügen, auf die Daten für den jeweiligen Präsidenten umzuschalten, indem man auf dessen Namen klickt. Dazu würden wir das Markup wie folgt verändern: From: Until: In diesem Beispiel wenden wir die x-show-Direktive auf ein div an, das die Details des Präsidenten enthält. Ob der Inhalt sichtbar ist oder nicht, bestimmt die „Truthiness“ des x-show-Werts. In unserem Fall wird das durch das pres.show-Feld definiert. Um Daten und Verhalten besser voneinander zu isolieren, ist im Fall einer realen Anwendung davon abzuraten, Geschäftsdaten zu nutzen, um die show/hide-Variable zu hosten. Um den Wert von pres.show zu verändern, ergänzen wir den Header um einen x-on:click-Handler. Dieser tauscht einfach den true/false-Wert von pres.show: pres.show = ! pres.show. Übergangsanimation hinzufügen AlpineJS enthält integrierte „Transitions“, die sich auf die show-/hide-Funktion anwenden lassen. Eine Standardanimation fügen Sie folgendermaßen hinzu: From: Until: Geändert hat sich lediglich das Element, das die x-show-Direktive enthält – nun weist es außerdem eine x-transition-Anweisung auf. In diesem Fall kommt ein „Slide & Fade“-Effekt zum Einsatz. Sie können den Übergangseffekt jedoch umfassend anpassen – oder auch eigene CSS-Klassen einbringen. Tiefergehende Informationen zum Thema Transitions in AlpineJS hält die Dokumentation bereit. Binding an Inputs Im nächsten Schritt ergänzen wir eine simple Filterfunktion. Dazu ist es nötig, einen Input hinzuzufügen, der an die Daten gebunden wird und die zurückgegebenen Datensätze auf der Grundlage dieses Werts filtern: ... Das x-data-Objekt weist nun ein „Filter“-Feld auf. Dieses ist über die x-model-Direktive bidirektional an das Eingabeelement gebunden und verweist auf “filter“. Wir haben die x-for-Direktive der Vorlage geändert, um auf eine neue getPresidents()-Methode zu verweisen, die im x-data-Objekt implementiert ist. Diese verwendet Standard-JavaScript-Syntax, um die Präsidenten danach zu filtern, ob ihr Filterfeld Text enthält. Die $dispatch-Direktive von AlpineJS Eventuell wirft die Kommunikation zwischen den Komponenten Fragen auf. AlpineJS verzichtet darauf, diese explizit zu „verdrahten“ – so gibt es beispielsweise keine parent-to-child-Properties. Stattdessen nutzt das Framework eine Browserumgebung (zum Beispiel das Fenster) über die $dispatch-Direktive als Event Bus. Das steht mit der AlpineJS-Philosophie in Einklang, nur so viel Funktionalität hinzuzufügen, wie nötig ist. (fm) Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!
AlpineJS-Tutorial Weniger Gepäck (wie mit AlpineJS) ist in manchen Situationen die bessere Wahl.Taras Hipp | shutterstock.com Auf mehrtägigen Outdoor-Trips stellt man sich schnell die Frage, ob sich manche Gepäckstücke eigentlich rechtfertigen. Das verhält sich mit den Entscheidungen, die im Rahmen des Softwareentwicklungsprozesses zu treffen sind, ganz ähnlich: Jede neue Systemkomponente birgt zusätzliche Komplexität, weshalb sich auch jede einzelne am Ende bezahlt machen sollte. Dass weniger oft mehr ist, beweist auch Alpine.js als die Option für Minimalisten unter den JavaScript-Frameworks. Das Rahmenwerk bietet eine beeindruckende Funktionsbandbreite – bei einem sehr überschaubaren Footprint. Dieses Tutorial behandelt die Grundlagen von AlpineJS anhand einiger Beispiele. Sämtlichen Code in diesem Artikel finden Sie auch auf GitHub. Die Minimal-API von AlpineJS Wie in der Dokumentation nachzulesen ist, besteht AlpineJS aus einer Kollektion von: 15 Attributen, sechs Eigenschaften und zwei Methoden. Diese überschaubare API realisiert ein simplifiziertes Reactivity-Paket, das mit einigen praktischen Extras wie Eventing und einem Store garniert ist. Eine einfache Webseite: Abgesehen von der Einbindung des Alpine-Pakets über CDN sind die einzigen Alpine-bezogenen Dinge in diesem Beispiel die beiden Direktiven x-data und x-text. Wenn Sie den Beispielcode in eine HTML-Seite auf Ihrem System einfügen und im Browser anzeigen, sehen Sie die Nachricht „Text literal“. Das ist wenig beeindruckend, demonstriert aber zwei interessante Fakten in Zusammenhang mit AlpineJS: Damit die Reactivity greift, müssen Sie das Markup in eine x-data-Direktive einschließen. Wird letztere entfernt, bleibt x-text wirkungslos. Die x-data-Direktive erstellt also eine Alpine-Komponente. In diesem Fall ist die Direktive leer – in der Praxis ist das in den allermeisten Fällen nicht so. Schließlich geht es um Komponenten, deren Zweck es ist, auf diese Daten zu „reagieren“. Lässt sich jeder gültige JavaScript-Code in x-text einfügen – was für alle Alpine-Direktiven gilt. Die x-text-Property verbindet HTML (die Ansicht) und JavaScript (das Verhalten). Alpine & HTMX Um seine Funktionalität zu definieren, nutzt AlpineJS HTML-Attribute. Insofern ähnelt es in gewisser Weise HTMX. Trotzdem sich die beiden Technologien voneinander unterscheiden, nutzen beide mit x-prefix HTML-Extension-Properties, um gutes, altes HTML performanter zu machen. x-data- & x-text-Elemente nutzen Der Inhalt von x-data wird allen enthaltenen Elementen zur Verfügung gestellt. Für ein besseres Verständnis werfen Sie einen Blick auf folgenden Code: Der Output auf der Seite sind jetzt die ersten Worte der US-amerikanischen Unabhängigkeitserklärung. Wie Sie sehen, hat x-data ein simples, altes JavaScript-Objekt mit einem einzigen Feld definiert – „message“. Auf dieses Objektfeld, das die Präambel enthält, verweist x-text. Reactivity nutzen Um einen Fehler im Dokument zu beheben, nutzen wir im folgenden Beispiel Reactivity: Fix It In diesem Code bezieht sich die x-text-Direktive auf die Substantivvariable, die durch sie offengelegt wird. Neu ist die Schaltfläche (Button), die mit einer x-on:click-Direktive ausgestattet ist. Der Handler für diesen Click Event ersetzt das alte Default-Nomen („men“) durch das genderneutrale „people“. Darum, die Referenz in x-text zu aktualisieren, „kümmert“ sich die Reactivity. Die Benutzeroberfläche spiegelt die Änderungen automatisch wider. Funktionen in Daten Bei den Data Properties in AlpineJS handelt es sich um voll funktionsfähige JavaScript-Objekte. Mit diesem Wissen lässt sich die oben genannte Anforderung auch auf andere Weise erfüllen: Fix It Diesem Beispielcode ist zu entnehmen, dass das data-Objekt jetzt eine fixIt-Methode hostet, die vom Click Handler aufgerufen wird. Die Objektstruktur lässt sich dabei anpassen – je nachdem, wie sich das HTML verhalten soll. script vs. x-data Es kann vorkommen, dass Ihnen Code begegnet, der über die x-data -Direktive eine Funktion aufruft, die in einem script -Tag definiert ist. Das ist eine Frage des persönlichen Geschmacks, weil es genauso funktioniert, wie ein Inline- x-data: ... ... Remote-Daten abrufen Um die Anforderungen etwas nach oben zu schrauben, soll es im nächsten Beispiel darum gehen, eine JSON-formatierte Liste der US-Präsidenten über eine externe API zu laden. Im ersten Schritt sorgen wir dafür, dass diese geladen wird, sobald auch die Seite geladen wird. Dafür nutzen wir die x-init-Direktive: Mit Blick auf diesen Code ist zu sagen, dass die x-data-Direktive nun ein einfaches presidents-Feld mit einem leeren Array aufweist. Den Inhalt dieses Felds gibt x-text innerhalb des span-Elements aus. Der x-init-Part gestaltet sich etwas komplexer: Er ist in eine Self-Executing-Funktion eingeschlossen. Das liegt daran, dass AlpineJS eine Funktion erwartet – keine Funktionsdefinition. Sobald die Liste der Präsidenten vom Endpunkt abgerufen wurde, fügen wir sie der presidents-Variablen hinzu, die Alpine im Rahmen seines x-data-Objekts zur Verfügung gestellt hat. Iteration mit AlpineJS An diesem Punkt ruft die App die Daten vom Remote-Endpunkt ab und speichert sie. Allerdings liefert sie ungewollte Outputs wie [Object], [Object] .... Um dieses Problem zu beheben, müssen wir uns zunächst die Iteration über die Daten ansehen: From: Until: Dieser Code enthält eine normale, ungeordnete Liste sowie ein HTML-Vorlagenelement, das wiederum eine x-for-Direktive enthält. Diese funktioniert genauso wie in anderen reaktiven Frameworks und ermöglicht es, eine Collection und einen Identifier zu spezifizieren. Diese werden dem eingeschlossenen Markup zur Verfügung gestellt, das die jeweilige Instanz dieser Sammlung repräsentiert (in diesem Fall pres). Der Rest des Markups verwendet die pres-Variable, um über x-text Daten aus den Objekten auszugeben. Die App sieht nun in etwa wie im nachfolgenden Screenshot aus: loading="lazy" width="400px">IDG Show/Hide & onClick Angenommen, wir möchten nun die Möglichkeit hinzufügen, auf die Daten für den jeweiligen Präsidenten umzuschalten, indem man auf dessen Namen klickt. Dazu würden wir das Markup wie folgt verändern: From: Until: In diesem Beispiel wenden wir die x-show-Direktive auf ein div an, das die Details des Präsidenten enthält. Ob der Inhalt sichtbar ist oder nicht, bestimmt die „Truthiness“ des x-show-Werts. In unserem Fall wird das durch das pres.show-Feld definiert. Um Daten und Verhalten besser voneinander zu isolieren, ist im Fall einer realen Anwendung davon abzuraten, Geschäftsdaten zu nutzen, um die show/hide-Variable zu hosten. Um den Wert von pres.show zu verändern, ergänzen wir den Header um einen x-on:click-Handler. Dieser tauscht einfach den true/false-Wert von pres.show: pres.show = ! pres.show. Übergangsanimation hinzufügen AlpineJS enthält integrierte „Transitions“, die sich auf die show-/hide-Funktion anwenden lassen. Eine Standardanimation fügen Sie folgendermaßen hinzu: From: Until: Geändert hat sich lediglich das Element, das die x-show-Direktive enthält – nun weist es außerdem eine x-transition-Anweisung auf. In diesem Fall kommt ein „Slide & Fade“-Effekt zum Einsatz. Sie können den Übergangseffekt jedoch umfassend anpassen – oder auch eigene CSS-Klassen einbringen. Tiefergehende Informationen zum Thema Transitions in AlpineJS hält die Dokumentation bereit. Binding an Inputs Im nächsten Schritt ergänzen wir eine simple Filterfunktion. Dazu ist es nötig, einen Input hinzuzufügen, der an die Daten gebunden wird und die zurückgegebenen Datensätze auf der Grundlage dieses Werts filtern: ... Das x-data-Objekt weist nun ein „Filter“-Feld auf. Dieses ist über die x-model-Direktive bidirektional an das Eingabeelement gebunden und verweist auf “filter“. Wir haben die x-for-Direktive der Vorlage geändert, um auf eine neue getPresidents()-Methode zu verweisen, die im x-data-Objekt implementiert ist. Diese verwendet Standard-JavaScript-Syntax, um die Präsidenten danach zu filtern, ob ihr Filterfeld Text enthält. Die $dispatch-Direktive von AlpineJS Eventuell wirft die Kommunikation zwischen den Komponenten Fragen auf. AlpineJS verzichtet darauf, diese explizit zu „verdrahten“ – so gibt es beispielsweise keine parent-to-child-Properties. Stattdessen nutzt das Framework eine Browserumgebung (zum Beispiel das Fenster) über die $dispatch-Direktive als Event Bus. Das steht mit der AlpineJS-Philosophie in Einklang, nur so viel Funktionalität hinzuzufügen, wie nötig ist. (fm) Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!