<Div> <p x-hide="items.length > 0">No more children in ul</p>

Question

<Div> <p x-hide="items.length > 0">No more children in ul</p>

<ul x-bind:children="items">

</ul>
</div>

Any idea how to implement something like that? Clean and declarative, without having to write verbose MutationObservers and similar with JS ending up with more JS code than HTML 🙂

I tried with https://alpinejs.dev/ but I don't seem to have find an easy way with it either, still end up writing tons of javascript 💩

0

30.07.2024

5 ответов

18 просмотров

drunktimelord

I'd use something like petite-vue tbh

0

4 месяца назад

Roman Sharkov Автор вопроса

Darvesh 🍀
htmx?

Htmx can't solve this problem nicely. I would need to write JS to setup listeners, which count items and then set display none on the text. This is not declarative at all. Or maybe you know something about HTMX I don't yet know?

0

4 месяца назад

drunktimelord

Roman Sharkov
Htmx can't solve this problem nicely. I would need...

htmx solves this by pairing with a backend that has a templating engine

0

4 месяца назад

Roman Sharkov Автор вопроса

drunktimelord
htmx solves this by pairing with a backend that ha...

I know 🙂 yet I don't want to reload the entire list, and hence I need to do it reactively in the browser with js with the hmtx:afterOnLoad

0

4 месяца назад