Erstellen einer To-Do-App mit HTMX und Django, teilweise mit unendlichem Scrollen

Dies ist Teil 7 der Serie, in der ich meinen Lernprozess von HTMX mit Django dokumentiere, in dem wir der Dokumentation von HTMX folgen, um eine Funktion zum unendlichen Scrollen für die Aufgabenelemente zu implementieren.

Wenn Sie sich den Rest der Serie ansehen möchten, schauen Sie sich die vollständige Liste unter dev.to/rodbv an.

Aktualisieren der Teilvorlage, um mehrere Elemente zu laden

Wenn wir den unendlichen Bildlauf implementieren, müssen wir mehrere Aufgabenelemente (die nächste „Seite“ mit Elementen) zurückgeben und sie in die Teilvorlage laden, die wir derzeit haben. Das bedeutet, dass wir die Zusammensetzung unserer Teilvorlage ein wenig ändern müssen; Es ist derzeit wie im Diagramm unten beschrieben eingestellt, in dem die Teilvorlage für die Darstellung eines einzelnen Aufgabenelements verantwortlich ist:

Wir wollen die Reihenfolge umkehren, sodass der Teil um die for-Schleife herumliegt:

Lassen Sie uns den Austausch in der Vorlage core/templates/index.html durchführen:

<ul>



<p>Soon we will get back to the template to add the hx-get ... hx-trigger="revealed" bit that performs the infinite scroll, but first let's just change the view to return several items instead of  one on the toggle and create operations:<br>
</p>

<pre class="brush:php;toolbar:false">... previous code 

def _create_todo(request):
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)

    return render(
        request,
        "tasks.html#todo-items-partial", # <-- CHANGED
        {"todos": [todo]}, # <-- CHANGED
        status=HTTPStatus.CREATED,
    )

... previous code 


@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(
        request,
        "tasks.html#todo-items-partial",  # <-- CHANGED
        {
            "todos": [todo], # <-- CHANGED
        },
    )

Die Tests, bei denen der Inhalt überprüft wird, werden weiterhin bestanden und die Seite sieht gleich aus. Wir sind also bereit, die unendliche Schriftrolle selbst zu implementieren.

Implementierung eines unendlichen Scrollens

Auf der Vorlage müssen wir eine hx-get-Anfrage an /tasks einrichten, mit hx-trigger="revealed", was bedeutet, dass die GET-Anfrage nur dann ausgelöst wird, wenn das Element kurz vor der Eingabe steht und auf dem Bildschirm sichtbar wird; Das heißt, wir möchten, dass es nach dem letzten Element in der Liste gesetzt wird, und wir müssen auch angeben, welche „Seite“ mit Daten wir laden möchten. In unserem Fall zeigen wir jeweils 20 Artikel.

Ändern wir die Vorlage entsprechend:

    <ul>



<p>There's an if next_page_number check around the "loading" icon at the bottom of the list, it will have two purposes: one is to indicate when we're loading more data, but more importantly, when the loader is revealed (it appears on the visible part of the page), it will trigger the hx-get call to /tasks, passing the page number to be retrieved. The attribute next_page_number will also be provided by the context</p>

<p>The directive hx-swap:outerHTML indicates that we will replace the outerHTML of this element with the set of <li>s we get from the server, which is great because not only we show the new data we got, but we also get rid of the loading icon.

<p>We can now move to the views file.</p>

<p>As a recap, here's how the GET /tasks view looks like by now; it's always returning the full template.<br>
</p>

<pre class="brush:php;toolbar:false">@require_http_methods(["GET", "POST"])
@login_required
def tasks(request):
    if request.method == "POST":
        return _create_todo(request)

    # GET /tasks
    context = {
        "todos": request.user.todos.all().order_by("-created_at"),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

Im obigen Code wurde bereits eine Änderung vorgenommen, die darin besteht, zuerst nach den neuesten Aufgaben zu sortieren; Da wir nun mit einer langen Liste rechnen, macht es keinen Sinn, unten neue Elemente hinzuzufügen und diese mit dem unendlichen Scrollen zu vermischen – das neue Element wird am Ende gemischt in der Mitte der Liste landen.

Wir müssen nun reguläre GET-Anfragen von HTMX-Anfragen unterscheiden, für die wir nur eine Liste von Aufgaben und unsere Teilvorlage zurückgeben. Es gibt eine Bibliothek namens django-htmx, die sehr praktisch ist, da sie den Anforderungsparameter um Attribute wie request.htmx und die Werte aller hx-*-Attribute erweitert, aber das ist im Moment übertrieben; Lassen Sie uns jetzt einfach nach dem HTMX-Header suchen und das Paging mit Djangos Paginator durchführen.

# core/views.py

... previous code

PAGE_SIZE = 20

...previous code

@require_http_methods(["GET", "POST"])
@login_required
def tasks(request):
    if request.method == "POST":
        return _create_todo(request)

    page_number = int(request.GET.get("page", 1))

    all_todos = request.user.todos.all().order_by("-created_at")
    paginator = Paginator(all_todos, PAGE_SIZE)
    curr_page = paginator.get_page(page_number)

    context = {
        "todos": curr_page.object_list,
        "fullname": request.user.get_full_name() or request.user.username,
        "next_page_number": page_number + 1 if curr_page.has_next() else None,
    }

    template_name = "tasks.html"

    if "HX-Request" in request.headers:
        template_name += "#todo-items-partial"

    return render(request, template_name, context)

Als erstes überprüfen wir den Seitenparameter und setzen ihn auf 1, wenn er nicht vorhanden ist.

Wir prüfen den HX-Request-Header in der Anfrage, der uns darüber informiert, ob die eingehende Anfrage von HTMX stammt, und uns entsprechend die Teilvorlage oder die vollständige Vorlage zurückgeben lässt.

Dieser Code erfordert sicherlich einige Tests, aber vorher versuchen wir es einfach. Schauen Sie sich das Netzwerk-Tool an und sehen Sie, wie die Anfragen ausgelöst werden, während die Seite gescrollt wird, bis wir die letzte Seite erreichen. Sie können auch das animierte „Laden“-Symbol für einen kurzen Moment sehen; Ich habe die Netzwerkgeschwindigkeit auf 4g gedrosselt, damit es länger sichtbar ist.

Tests hinzufügen

Zum Abschluss können wir einen Test hinzufügen, um sicherzustellen, dass die Paginierung wie vorgesehen funktioniert

<ul>



<p>Soon we will get back to the template to add the hx-get ... hx-trigger="revealed" bit that performs the infinite scroll, but first let's just change the view to return several items instead of  one on the toggle and create operations:<br>
</p>

<pre class="brush:php;toolbar:false">... previous code 

def _create_todo(request):
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)

    return render(
        request,
        "tasks.html#todo-items-partial", # <-- CHANGED
        {"todos": [todo]}, # <-- CHANGED
        status=HTTPStatus.CREATED,
    )

... previous code 


@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(
        request,
        "tasks.html#todo-items-partial",  # <-- CHANGED
        {
            "todos": [todo], # <-- CHANGED
        },
    )

Das war's mittlerweile! Das war mit Abstand der größte Spaß, den ich bisher mit HTMX hatte. Der vollständige Code für diesen Beitrag ist hier.

Für den nächsten Beitrag denke ich darüber nach, eine Client-Statusverwaltung mit AlpineJS hinzuzufügen oder vielleicht eine „Fälligkeitsdatum“-Funktion hinzuzufügen. Wir sehen uns!

Das obige ist der detaillierte Inhalt vonErstellen einer To-Do-App mit HTMX und Django, teilweise mit unendlichem Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!