這是該系列的第 7 部分，我將在其中記錄我使用 Django 學(xué)習(xí) HTMX 的過(guò)程，其中我們將按照 HTMX 的文檔來(lái)實(shí)現(xiàn)待辦事項(xiàng)的無(wú)限滾動(dòng)功能。

如果您想查看該系列的其餘部分，請(qǐng)查看 dev.to/rodbv 以獲得完整清單。

更新部分模板以載入多個(gè)項(xiàng)目

當(dāng)我們實(shí)作無(wú)限滾動(dòng)時(shí)，我們將必須傳回幾個(gè)待辦事項(xiàng)（專(zhuān)案的下一個(gè)「頁(yè)面」）並將它們載入到我們目前擁有的部分範(fàn)本中。這意味著稍微改變我們的部分範(fàn)本的組成方式；目前的設(shè)定如下圖所示，其中部分範(fàn)本負(fù)責(zé)渲染單一待辦事項(xiàng)：

我們想要反轉(zhuǎn)順序，讓部分圍繞 for 迴圈：

讓我們?cè)诠?fà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
        },
    )

檢查內(nèi)容的測(cè)試仍然通過(guò)，而且頁(yè)面看起來(lái)相同，因此我們很好地實(shí)現(xiàn)無(wú)限滾動(dòng)本身。

實(shí)現(xiàn)無(wú)限滾動(dòng)

在模板上，我們需要向/tasks 設(shè)定一個(gè)hx-get 請(qǐng)求，其中hx-trigger="revealed" ，這意味著只有當(dāng)元素即將進(jìn)入螢?zāi)簧峡梢?jiàn)時(shí)才會(huì)觸發(fā)GET 請(qǐng)求；這意味著我們希望將其設(shè)定在清單中最後一個(gè)元素之後，並且我們還需要指示要載入哪個(gè)「頁(yè)面」資料。在我們的例子中，我們將一次顯示 20 個(gè)項(xiàng)目。

讓我們相應(yīng)地更改模板：

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

上面的程式碼已經(jīng)做了改動(dòng)，就是按照最新的待辦事項(xiàng)優(yōu)先排序；既然我們期望有一個(gè)很長(zhǎng)的列表，那麼在底部添加新項(xiàng)目並將其與無(wú)限滾動(dòng)混合是沒(méi)有意義的- 新項(xiàng)目最終將混合在清單的中間。

我們現(xiàn)在需要區(qū)分常規(guī) GET 請(qǐng)求和 HTMX 請(qǐng)求，為此我們將只傳回待辦事項(xiàng)清單和部分範(fàn)本。有一個(gè)名為django-htmx 的函式庫(kù)，它非常方便，因?yàn)樗褂胷equest.htmx 等屬性和所有hx-* 屬性的值擴(kuò)展了請(qǐng)求參數(shù)，但目前這有點(diǎn)過(guò)分了；現(xiàn)在讓我們檢查HTMX 標(biāo)頭，並使用Django 分頁(yè)器處理分頁(yè)。

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

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

我們檢查請(qǐng)求中的 HX-Request 標(biāo)頭，這將告知我們傳入的請(qǐng)求是否來(lái)自 HTMX，並讓我們相應(yīng)地返回部分模板或完整模板。

這段程式碼肯定需要一些測(cè)試，但在此之前讓我們先嘗試一下?？纯淳W(wǎng)路工具，當(dāng)頁(yè)面滾動(dòng)時(shí)如何觸發(fā)請(qǐng)求，直到到達(dá)最後一頁(yè)。您還可以看到動(dòng)畫(huà)「正在載入」圖示短暫顯示；我已將網(wǎng)路速度限制為 4g，以使其可見(jiàn)時(shí)間更長(zhǎng)。

添加測(cè)試

最後，我們可以新增一個(gè)測(cè)驗(yàn)來(lái)確保分頁(yè)能如預(yù)期運(yùn)作

<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 遇到的最有趣的事情。這篇文章的完整程式碼在這裡。

對(duì)於下一篇文章，我正在考慮使用 AlpineJS 新增一些客戶(hù)端狀態(tài)管理，或新增「截止日期」功能。再見(jiàn)！

以上是使用 HTMX 和 Django 建立待辦事項(xiàng)應(yīng)用程序，部分無(wú)限滾動(dòng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！