這是該系列的第 7 部分，我將在其中記錄我使用 Django 學習 HTMX 的過程，其中我們將按照 HTMX 的文檔來實現(xiàn)待辦事項的無限滾動功能。

如果您想查看該系列的其余部分，請查看 dev.to/rodbv 以獲得完整列表。

更新部分模板以加載多個項目

當我們實現(xiàn)無限滾動時，我們將必須返回幾個待辦事項（項目的下一個“頁面”）并將它們加載到我們當前擁有的部分模板中。這意味著稍微改變我們的部分模板的組成方式；目前的設置如下圖所示，其中部分模板負責渲染單個待辦事項：

我們想要反轉順序，使部分圍繞 for 循環(huán)：

讓我們在模板 core/templates/index.html 中執(zhí)行交換：

<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
        },
    )

檢查內容的測試仍然通過，并且頁面看起來相同，因此我們很好地實現(xiàn)無限滾動本身。

實現(xiàn)無限滾動

在模板上，我們需要向 /tasks 設置一個 hx-get 請求，其中 hx-trigger="revealed" ，這意味著只有當元素即將進入屏幕上可見時才會觸發(fā) GET 請求；這意味著我們希望將其設置在列表中最后一個元素之后，并且我們還需要指示要加載哪個“頁面”數(shù)據(jù)。在我們的例子中，我們將一次顯示 20 個項目。

讓我們相應地更改模板：

    <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)

上面的代碼已經做了改動，就是按照最新的待辦事項優(yōu)先排序；既然我們期望有一個很長的列表，那么在底部添加新項目并將其與無限滾動混合是沒有意義的 - 新項目最終將混合在列表的中間。

我們現(xiàn)在需要區(qū)分常規(guī) GET 請求和 HTMX 請求，為此我們將僅返回待辦事項列表和部分模板。有一個名為 django-htmx 的庫，它非常方便，因為它使用 request.htmx 等屬性和所有 hx-* 屬性的值擴展了請求參數(shù)，但目前這有點過分了；現(xiàn)在讓我們檢查 HTMX 標頭，并使用 Django 分頁器處理分頁。

# 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)

我們做的第一件事是檢查頁面參數(shù)，如果不存在則將其設置為 1。

我們檢查請求中的 HX-Request 標頭，這將告知我們傳入的請求是否來自 HTMX，并讓我們相應地返回部分模板或完整模板。

這段代碼肯定需要一些測試，但在此之前讓我們先嘗試一下?？匆幌戮W絡工具，當頁面滾動時如何觸發(fā)請求，直到到達最后一頁。您還可以看到動畫“正在加載”圖標短暫顯示；我已將網絡速度限制為 4g，以使其可見時間更長。

添加測試

最后，我們可以添加一個測試來確保分頁按預期工作

<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
        },
    )

現(xiàn)在就這樣了！這是迄今為止我使用 HTMX 遇到的最有趣的事情。這篇文章的完整代碼在這里。

對于下一篇文章，我正在考慮使用 AlpineJS 添加一些客戶端狀態(tài)管理，或者添加“截止日期”功能。再見！

以上是使用 HTMX 和 Django 創(chuàng)建待辦事項應用程序，部分無限滾動的詳細內容。更多信息請關注PHP中文網其他相關文章！