Mencipta apl Tugasan dengan HTMX dan Django, bahagian skrol tak terhingga

Ini adalah bahagian 7 siri di mana saya mendokumentasikan proses pembelajaran HTMX saya dengan Django, di mana kami akan mengikuti dokumentasi HTMX untuk melaksanakan ciri tatal tak terhingga untuk item todo.

Jika anda ingin menyemak siri yang lain, lihat dev.to/rodbv untuk senarai lengkap.

Mengemas kini templat separa untuk memuatkan beberapa item

Apabila kami melaksanakan tatal tak terhingga, kami perlu memulangkan beberapa item tugasan ("halaman" item seterusnya) dan memuatkannya dalam templat separa yang kami ada sekarang. Ini bermakna mengubah sedikit cara templat separa kami digubah; pada masa ini ia ditetapkan seperti yang diterangkan dalam rajah di bawah, yang mana templat separa bertanggungjawab untuk memaparkan satu item tugasan:

Kami mahu menyongsangkan tertib, mempunyai separa di sekeliling gelung for:

Mari kita lakukan pertukaran dalam teras templat/templates/index.html:

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

Ujian yang memeriksa kandungan masih lulus dan halaman kelihatan sama, jadi kami baik untuk melaksanakan tatal tak terhingga itu sendiri.

Melaksanakan tatal tak terhingga

Pada templat, kita perlu menyediakan permintaan hx-get ke /tasks, dengan hx-trigger="revealed", yang bermaksud permintaan GET hanya dicetuskan apabila elemen akan masuk menjadi kelihatan pada skrin; ini bermakna kami mahu ia ditetapkan selepas elemen terakhir dalam senarai, dan kami juga perlu menunjukkan "halaman" data yang ingin kami muatkan. Dalam kes kami, kami akan menunjukkan 20 item pada satu masa.

Jom tukar templat mengikut kesesuaian:

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

Sudah ada perubahan dalam kod di atas, iaitu mengisih mengikut todos terbaharu dahulu; sekarang setelah kami menjangkakan mempunyai senarai yang panjang, tidak masuk akal untuk menambah item baharu di bahagian bawah dan mencampurkannya dengan tatal tak terhingga - item baharu itu akan bercampur di tengah-tengah senarai.

Kami kini perlu membezakan permintaan GET biasa daripada permintaan HTMX, yang mana kami akan mengembalikan hanya senarai tugasan dan templat separa kami. Terdapat perpustakaan yang dipanggil django-htmx yang sangat berguna, kerana ia memanjangkan parameter permintaan dengan atribut seperti request.htmx dan nilai semua atribut hx-*, tetapi itu berlebihan pada masa ini; mari kita semak pengepala HTMX sekarang, dan kendalikan paging menggunakan penomboran 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)

Perkara pertama yang kami lakukan ialah menyemak param halaman dan tetapkannya kepada 1 jika tiada.

Kami menyemak pengepala HX-Request dalam permintaan, yang akan memberitahu kami sama ada permintaan masuk adalah daripada HTMX dan membolehkan kami mengembalikan templat separa atau templat penuh dengan sewajarnya.

Kod ini pasti memerlukan beberapa ujian, tetapi sebelum itu mari kita mencubanya. Lihatlah alat rangkaian, bagaimana permintaan dicetuskan semasa halaman ditatal, sehingga kami mencapai halaman terakhir. Anda juga boleh melihat ikon "pemuatan" animasi dipaparkan untuk seketika; Saya telah mendikitkan kelajuan rangkaian kepada 4g untuk menjadikannya kelihatan lebih lama.

Menambah ujian

Untuk menyelesaikannya, kami boleh menambah ujian untuk memastikan penomboran berfungsi seperti yang dimaksudkan

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

Itu sahaja sekarang! Ini adalah yang paling menyeronokkan yang saya alami dengan HTMX setakat ini. Kod penuh untuk siaran ini ada di sini.

Untuk siaran seterusnya saya sedang mempertimbangkan untuk menambah beberapa pengurusan keadaan pelanggan dengan AlpineJS, atau mungkin menambah ciri "tarikh tamat". Jumpa lagi!

Atas ialah kandungan terperinci Mencipta apl Tugasan dengan HTMX dan Django, bahagian skrol tak terhingga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!