Latihan 1: Infinite Scroll — HTMX

Latihan 1 dari materi Infinite Scroll di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <div id="feed"> dengan dua item dan, di ujungnya, sentinel <div hx-get="/api/feed?page=2">Loading more...</div>. Di bawahnya ada dua contoh balasan server: halaman 2 membawa dua item dan sentinel baru untuk halaman 3, sedangkan halaman 3, halaman terakhir, cuma membawa satu item tanpa sentinel. Biarkan semuanya, lalu di sentinel halaman 2:

Tambahkan hx-trigger="revealed" supaya halaman 2 diminta begitu sentinel-nya terlihat.
Tambahkan hx-swap="outerHTML" supaya sentinel itu sendiri yang diganti balasannya.
Klik Jalankan. Di pratinjau sentinel-nya langsung terlihat, jadi halaman 2 dimuat, sentinel barunya memuat halaman 3, dan scroll-nya selesai di Post 5.

Yang dicek:

#feed masih ada, dan sentinel /api/feed?page=2 punya hx-trigger="revealed" dan hx-swap="outerHTML".
Sesudah htmx selesai memuat, #feed berisi minimal 5 .item (Post 1 sampai Post 5).
Gak ada lagi elemen ber-hx-get di dalam #feed: halaman terakhir gak membawa sentinel, jadi scroll-nya benar-benar berhenti tanpa sentinel yang tertinggal.

Hint

Sentinel-nya sudah tahu alamat halaman berikutnya. Yang kurang: kapan ia meminta, dan apa yang diganti balasannya.
revealed terpicu sekali saat elemen terlihat. outerHTML mengganti seluruh sentinel, supaya balasan yang membawa sentinel baru bisa meneruskan polanya.
<div hx-get="/api/feed?page=2" hx-trigger="revealed" hx-swap="outerHTML">Loading more...</div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Infinite Scroll — HTMX

Hint

Memperbarui Aplikasi