Latihan 2: hx-swap — HTMX

Latihan 2 dari materi hx-swap di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Editornya berisi komentar TODO saja. Tulis tombol yang menukar dirinya sendiri dengan balasan server:

Buat <button> bertuliskan Klik untuk update dengan hx-get="/api/updated-button".
Tambahkan hx-swap="outerHTML" di tombol yang sama. Tanpa hx-target, target-nya tombol itu sendiri, dan outerHTML mengganti seluruh tombol, bukan cuma tulisannya.

Yang dicek:

Ada <button>.
Ada tombol yang punya hx-swap="outerHTML", dengan hx-get persis /api/updated-button.
Kodenya memuat outerHTML di luar komentar.

Tulisan tombolnya gak dicek, tapi tulis sesuai langkah di atas.

Hint

Cara penukaran menentukan bagian mana yang diganti balasan: isi elemennya, atau elemennya sendiri.
Mengganti elemen itu sendiri, tag-nya juga, namanya outerHTML. Tulis di tombol yang sama dengan hx-get-nya, tanpa hx-target.
<button hx-get="/api/updated-button" hx-swap="outerHTML">Klik untuk update</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…