HTMX ermöglicht es, mit einfachen HTML-Attributen leistungsstarke dynamische Webanwendungen zu erstellen. In diesem Teil werden wir die fortgeschrittenen Funktionen von HTMX untersuchen und anhand praktischer Anwendungsbeispiele wie hx-trigger, Ereignis-Trigger und dynamische Datenverarbeitung die Möglichkeiten von HTMX erweitern.

Im letzten 6. Teil werden wir uns auf die Kenntnisse zur Verarbeitung von Antworten zwischen Server und Client konzentrieren und den perfekten Prozess für die dynamische Webentwicklung mit HTMX und Django abschließen.

1. Einführung in die fortgeschrittenen Funktionen von HTMX

Die fortgeschrittenen Funktionen von HTMX machen die dynamische Datenverarbeitung flexibler und leistungsstärker. Hier sind die Hauptfunktionen, die wir in diesem Artikel behandeln werden:

• hx-trigger: Setzen eines bestimmten Ereignisses als Trigger für die Anfrage.
• hx-params: Anpassen der zu übertragenden Daten bei Anfragen.
• hx-swap: Festlegen, wie die Serverantwortdaten in das DOM eingefügt werden.
• Bedingte Triggerung: Verarbeitung von Aktionen basierend auf Bedingungen.

2. hx-trigger: Ereignisbasierte Anfragen

hx-trigger ermöglicht es, ein bestimmtes Ereignis als Trigger für die Serveranfrage zu setzen. Standardmäßig wird das Klickevent (click) verwendet, kann jedoch beliebig angepasst werden.

Beispiel für die grundlegende Verwendung

<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="Suchbegriff eingeben">
<div id="results">Suchergebnisse werden hier angezeigt.</div>

Wichtige Punkte

• keyup: Sendet eine Anfrage bei jedem Tastendruck.
• changed: Sendet die Anfrage nur, wenn sich der Eingabewert ändert.
• delay: Verzögert das Senden der Anfrage um 500 ms.
• hx-target: Gibt das Element an, in das die Serverantwortdaten eingefügt werden.

3. hx-params: Kontrolle der zu übertragenden Daten

hx-params ermöglicht es, die zu übertragenden Daten an den Server anzupassen.

• Sie können bestimmte Daten ausschließen oder nur die benötigten Daten übertragen.

Beispiel: Nur bestimmte Felder übertragen

<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
    <input type="text" name="username" placeholder="Benutzername">
    <input type="email" name="email" placeholder="E-Mail">
    <input type="password" name="password" placeholder="Passwort">
    <button type="submit">Absenden</button>
</form>
<div id="result">Das Ergebnis wird hier angezeigt.</div>

Im obigen Code werden nur die Felder username und email an den Server übertragen, während password ausgeschlossen bleibt.

4. hx-swap: Kontrolle der Methode zum Einfügen von Antwortdaten

hx-swap legt fest, wie die empfangenen Antwortdaten vom Server in das DOM eingefügt werden. Der Standardwert ist innerHTML, was den bestehenden Inhalt ersetzt.

Wichtige Optionen

• innerHTML: Standardwert. Ersetzt den bestehenden Inhalt.
• beforebegin: Vor dem Element einfügen.
• afterbegin: Ganz oben im Element einfügen.
• beforeend: Ganz unten im Element einfügen.
• afterend: Nach dem Element einfügen.

Verwendungsbeispiel

<div id="content">
    <p>Bestehender Inhalt</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">Inhalt hinzufügen</button>

Beim Klicken wird die Antwort von /new-content/ am Ende des Elements mit <div id="content"> eingefügt.

5. Bedingte Triggerung

HTMX kann Anfragen bedingt auslösen. Damit können Sie die Interaktionen mit der Benutzeroberfläche noch präziser steuern.

Beispiel: Anfrage basierend auf dem Auswahlstatus eines Kontrollkästchens

<input type="checkbox" id="confirm" hx-get="/confirm/" hx-target="#message" hx-trigger="change:checked">
<div id="message"></div>

Eine Anfrage wird nur gesendet, wenn das Kontrollkästchen ausgewählt ist.

6. Praktische Übung: Dynamisches Filtern mit HTMX implementieren

HTML-Code

<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
    <option value="all">Alle</option>
    <option value="category1">Kategorie 1</option>
    <option value="category2">Kategorie 2</option>
</select>
<div id="results">Die Filterergebnisse werden hier angezeigt.</div>

Django-View

from django.http import JsonResponse

def filter_view(request):
    category = request.GET.get("category", "all")
    results = {
        "all": ["Gesamtpunkt 1", "Gesamtpunkt 2"],
        "category1": ["Kategorie 1 Punkt 1", "Kategorie 1 Punkt 2"],
        "category2": ["Kategorie 2 Punkt 1", "Kategorie 2 Punkt 2"],
    }
    return JsonResponse({"results": results.get(category, [])})

Zum Abschluss dieser Episode

In diesem Teil haben wir Möglichkeiten untersucht, wie man die fortgeschrittenen Funktionen von HTMX nutzen kann, um die Integration mit Django weiter auszubauen.

Im nächsten Teil, dem letzten Teil, werden wir praktische Entwicklungstipps und Optimierungsansätze zur Verarbeitung von Antworten zwischen Server und Client vorstellen. Seid gespannt! 😊