Latihan 1: Out of Band Swaps — HTMX

Latihan 1 dari materi Out of Band Swaps di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya penghitung <span id="item-count">0</span>, tombol Tambah Item dengan hx-target="#item-list" dan hx-swap="beforeend", daftar <ul id="item-list">, dan contoh balasan server di <template id="contoh-balasan">. Biarkan semuanya, lalu:

Di tombol, tambahkan hx-post="/api/items".
Di dalam <template id="contoh-balasan">, beri <span id="item-count"> atribut hx-swap-oob="true".

Yang dicek:

<button> punya hx-post persis /api/items dan hx-swap persis beforeend.
Ada <span id="item-count"> di halaman.
Kodenya memuat hx-post dan atribut hx-swap-oob= di luar komentar.

Di pratinjau, klik Tambah Item: htmx mengirim POST itu, dijawab isi template, <li>Item baru</li> masuk ke akhir daftar, dan penghitungnya jadi 1.

Hint

Tombolnya belum mengirim apa pun, dan penghitung di contoh balasan belum ditandai untuk diantar ke tempatnya sendiri.
hx-post berisi alamatnya, di tag <button>. hx-swap-oob="true" dipasang di <span id="item-count"> yang ada di dalam template, bukan di tombol.
<button hx-post="/api/items" hx-target="#item-list" hx-swap="beforeend">Tambah Item</button> ... <template id="contoh-balasan"> <li>Item baru</li> <span id="item-count" hx-swap-oob="true">1</span> </template>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Out of Band Swaps — HTMX

Hint

Memperbarui Aplikasi