これは、Django を使用した HTMX の學(xué)習(xí)プロセスを文書化するシリーズのパート 7 です。このシリーズでは、HTMX の文書に従って、ToDo アイテムの無限スクロール機(jī)能を?qū)g裝します。

シリーズの殘りの部分を確認(rèn)したい場(chǎng)合は、dev.to/rodbv で完全なリストをご覧ください。

部分テンプレートを更新して複數(shù)の項(xiàng)目をロードする

無限スクロールを?qū)g裝する場(chǎng)合、いくつかの todo 項(xiàng)目 (項(xiàng)目の次の「ページ」) を返し、それらを現(xiàn)在持っている部分的なテンプレートにロードする必要があります。これは、部分テンプレートの構(gòu)成方法を少し変更することを意味します?，F(xiàn)在、以下の図で説明されているように設(shè)定されており、部分テンプレートは 1 つの ToDo アイテムのレンダリングを擔(dān)當(dāng)します。

for ループの周りの部分を含めて、順序を反転したいと思います。

テンプレート core/templates/index.html で交換を?qū)g行してみましょう:

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

コンテンツがまだ合格しているかどうかをチェックするテストは合格しており、ページの見た目は同じなので、無限スクロール自體を?qū)g裝しても問題ありません。

無限スクロールの実裝

テンプレートでは、hx-trigger="revealed" を指定して /tasks への hx-get リクエストを設(shè)定する必要があります。これは、要素が畫面に表示される直前にのみ GET リクエストが起動(dòng)されることを意味します。これは、リストの最後の要素の後に設(shè)定する必要があり、データのどの「ページ」をロードするかを指定する必要があることを意味します。この場(chǎng)合、一度に 20 個(gè)のアイテムを表示します。

それに応じてテンプレートを変更しましょう:

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

上記のコードにはすでに変更が加えられており、最初に最新の Todo で並べ替えるようになっています。長(zhǎng)いリストが予想されるので、新しい項(xiàng)目を一番下に追加して無限スクロールと混ぜるのは意味がありません。新しい項(xiàng)目はリストの真ん中に混ぜられてしまいます。

ここで、通常の GET リクエストと HTMX リクエストを區(qū)別する必要があります。これに対して、todo のリストと部分的なテンプレートのみを返します。 django-htmx というライブラリがあり、これは request.htmx などの屬性とすべての hx-* 屬性の値を使用してリクエスト パラメーターを拡張するため、非常に便利ですが、現(xiàn)時(shí)點(diǎn)ではやりすぎです。ここまでで HTMX ヘッダーを確認(rèn)し、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)

最初にページパラメータを確認(rèn)し、存在しない場(chǎng)合は 1 に設(shè)定します。

リクエスト內(nèi)の HX-Request ヘッダーをチェックします。これにより、受信リクエストが HTMX からのものであるかどうかがわかり、それに応じて部分テンプレートまたは完全なテンプレートを返すことができます。

このコードには確かにいくつかのテストが必要ですが、その前に試してみましょう。最後のページに到達(dá)するまで、ページがスクロールされるときにネットワーク ツールがどのようにリクエストを発行するかを見てください。アニメーション化された「読み込み中」アイコンが一瞬表示されることもあります。より長(zhǎng)く表示できるように、ネットワーク速度を 4g に抑制しました。

テストの追加

最後に、ページネーションが意図したとおりに機(jī)能することを確認(rè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
        },
    )

これで終わりです!これは、これまで HTMX で體験した中で最も楽しかったです。この投稿の完全なコードはここにあります。

次の投稿では、AlpineJS を使用したクライアント狀態(tài)管理を追加するか、「期限」機(jī)能を追加することを検討しています。また會(huì)いましょう!

以上がHTMX と Django を使用した To-Do アプリの作成 (一部無限スクロール)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。