django htmx patterns

Django + Htmx-Muster

Dieses Repo ist eine grobe Zusammenstellung der Muster, die ich verwende und entwickle, wenn ich Django-Projekte schreibe, die htmx verwenden, mit vollständigem Beispielcode.

Die Dokumente sollen auf GitHub angezeigt werden: https://github.com/spookylukey/django-htmx-patterns/ und der Code kann bei Bedarf lokal ausgeführt werden.

Mein Ziel ist es, Folgendes zu dokumentieren und zu teilen:

1. Die erforderlichen Grundmuster und Kontrollflüsse
2. Einige Verbesserungen können wir mit ein paar Dienstprogrammen vornehmen

Der dargestellte Code hängt nur von Django und htmx ab, sofern nicht anders angegeben. Ich werde es nicht als Bibliothek verpacken. Stattdessen wird es als öffentliche Domain veröffentlicht und Sie werden aufgefordert, es für Ihre eigenen Zwecke zu kopieren und einzufügen. (Weitere Informationen dazu finden Sie in der Dokumentation „Ansatz“).

Es gibt einige Django-Pakete, die Verknüpfungen für einige der hier genannten Dinge bereitstellen, wie z. B. django-htmx, aber ich werde der Übersichtlichkeit halber keines davon verwenden.

Inhalt

• Ansatz
• Basisvorlage
• Überschriften
• Postanfragen
• Teiltöne mit separaten Vorlagen
• Trennen Sie Teilbilder mit einer einzigen Ansicht
• Inline-Teiltöne
• Einzelansicht mit kombinierten Aktionen
• Neustart anzeigen
• Django-Functest-Muster
• Modale Dialoge
• Formularvalidierung

Dies ist noch in Arbeit, ich werde versuchen, es auf dem neuesten Stand zu halten. PRs willkommen.

tl;dr

Die größten Beiträge in diesem Repo sind:

• Inline-Teiltöne mit Blockauswahl in der Vorlage.

  Dabei handelt es sich um ein Muster, das es Ihnen ermöglicht, die Teile der Seite für eine gute „Lokalität des Verhaltens“ zusammenzuhalten und zu vermeiden, dass der Ansichtscode irgendetwas darüber wissen muss, welche Vorlagenfragmente/Teile verwendet werden. Änderungen am Vorlagencode für HTML bestehen normalerweise darin, dass einige Teile einer Vorlage in einen Django- block eingeschlossen und Standard-HTMX-Attribute hinzugefügt werden. Bei Änderungen am Ansichtscode für htmx wird häufig nur ein einzelner Dekorator zur Ansichtsfunktion hinzugefügt: @for_htmx(use_block_from_params=True) .

  Dieses Muster macht einen großen Unterschied für die Htmx-Benutzerfreundlichkeit in Django.

• Vollständiges Beispiel für die feldweise Htmx-Formularvalidierung unter Beibehaltung der Formabstraktion von Django und all ihrer Vorteile.

• schöne Muster zum Erstellen von Modalitäten

Anforderungen

• Django

• htmx (siehe Basisvorlage für empfohlene Installationsdokumente)

• Die schönsten Muster hier erfordern Django-Render-Block:

   pip install django-render-block
  

Monster

Mein Beispielcode enthält traurige und glückliche Monster, die umarmt oder getreten werden können, um ihren Zustand zu ändern. Bitte beachten Sie, dass ich das Treten von Monstern nicht befürworte und auch nicht dazu rate, sie zu umarmen.

Code-Ordner

Im Codeordner befindet sich eine Demo-App, die vollständige Arbeitsbeispiele für alles in den Dokumenten enthält.

Um lokal zu installieren, erstellen und aktivieren Sie eine virtuelle Umgebung und führen Sie dann Folgendes aus:

 CD-Code
pip install -r Anforderungen.txt
Python manage.py migrieren
python manage.py runserver

Rückmeldung

Ihr Feedback ist uns sehr willkommen! Markieren Sie dieses Repo, wenn es Ihnen gefällt, und teilen Sie bitte Ihre Ideen in Diskussionen mit.

Links

Einige andere gute HTML-Ressourcen:

• Wie erstelle ich ein Django-Formular (mit HTMX) in 90 Sekunden? - kurzer, einfacher Beitrag (und Video), der zeigt, wie man sehr schnell mit der Verwendung von HTMX mit Django beginnen kann
• So verwenden Sie Htmx in Django – Tutorial-Blogbeitrag
• django-htmx – Dienstprogrammbibliothek mit hilfreichen Dokumenten
• django-htmx-fun – Beispielanwendung mit Django/htmx
• django-siteajax – hat einige ähnliche Ideen wie dieses Repo

Wenn Ihnen dieses Repo gefallen hat, könnten Ihnen auch einige meiner anderen Ressourcen helfen:

• django-functest
• Django-Ansichten – Der richtige Weg