Comment by yawaramin
3 days ago
Htmx offers more flexibility than Alpine Ajax. Here's an example: htmx allows using relative selectors, which allow you to target elements relative to the triggering element in the DOM tree. This gives us a lot of power for swapping in pieces of UI without having to make up ids for lots of elements.
I have a blog post in the works for this feature, here's a small code sample I made to show the idea:
<div class="card"> ╾──────────────╮
<header class="card-header"> |
<a |
class="button is-link" |
title="Load links for #167" |
role="button" |
aria-expanded="false" |
href="/app/notes/167/links" |
hx-trigger="click once" |
hx-boost="true" |
hx-push-url="false" │
hx-target="closest .card" ╾─╯
╭───╼ hx-swap="beforeend show:none"
| ><b>±</b></a>
| <a
| class="card-header-title"
| href="/app/notes/167"
| hx-boost="true"
| hx-target="#note"
| hx-swap="outerHTML transition:true show:window:top"
| >#167 Velificatio</a>
| </header>
╰╼
</div>
No comments yet
Contribute on Hacker News ↗