4 ms·

Specifically this html attribute in the delete button: `hx-delete="/contact/1"`. where the id of that contact is 1 and it is hardcoded as a string.[0] How do I

Specifically this html attribute in the delete button: `hx-delete="/contact/1"`. where the id of that contact is 1 and it is hardcoded as a string.[0] How do I dynamically generate a list of deletable items? In react would be something like (simplified obviously) `contacts.map(c => <button onClick={apiDelete(c.id)}/>`. I dont understand how could I generate dynamic lists without hardcoding Ids... is that a case where I would need to use normal vanilla js ? 0: https://htmx.org/examples/delete-row/ https://htmx.org/examples/delete-row/

murkt 5y ago
Just generate these ids on the server. For example, when I render a new field for which I need a delete button, I send numbers of other fields along with them, and server renders a new field for me with a new id.
- nvegater 5y ago
  Thanks for responding. If I understand correctly, then I would need a server like nodejs or django generating and sending the "index.htmx" to the browser and then responding to users interactions by embedding the data from the server inside of the htmx files, correct?
  - murkt 5y ago
    Sounds about right. It’s the good old server templates (we use Jinja), and for interactivity I have additional attributes here and there, and sometimes additional endpoints. It’s miles better than full-fledged JS SPA. I’ve had React+GraphQL app that I’m migrating piece by piece when we need a new feature, and it’s a few times faster to do and easier to understand.
recursivedoubts 5y ago
You generate all links on the server side, using Hypermedia As The Application of Engine State (HATEOAS): https://htmx.org/essays/hateoas/ https://htmx.org/essays/hateoas/
- nvegater 5y ago
  I went into the rabbit hole. There were 2 particularly useful links I found: https://htmx.org/essays/a-response-to-rich-harris/ https://htmx.org/essays/a-response-to-rich-harris/ https://htmx.org/examples/update-other-content/ https://htmx.org/examples/update-other-content/ Very interesting developing tech philosophy. I was a bit in the js bubble for a while. Its refreshing to see such a simple and powerful idea/tech outside of it:)
  - trestacos 5y ago
    Thanks for finding/sharing those links. As I read them they reminded me a lot of what I've been seeing as I have been using Remix (remix.run) For example: in "how to update content", they discuss path dependent updates. Those are how remix does all it's updates - they use nested routes, so it knows it only needs to update a part of the page (eg only update the content of the page, leaving the nav alone, since an update occured only in the content part of the page) I think the htmx folks would have a lot of issues with remix but I think remix takes a lot of the best of both worlds. Remix focuses on using basic html/http concepts and layering some smart JavaScript on top of that. To return the favor, here's a couple docs I found helpful: https://remix.run/docs/en/v1/tutorials/jokes https://remix.run/docs/en/v1/tutorials/jokes - this is their advanced tutorial and it's a bit long but once you get past the setup steps it's a really well written introduction to the concepts of remix through useful examples. One of the better tutorials I've ever read. And then two of their technical docs which are a bit hidden in their site but useful: https://remix.run/docs/en/v1/pages/philosophy https://remix.run/docs/en/v1/pages/philosophy https://remix.run/docs/en/v1/pages/technical-explanation https://remix.run/docs/en/v1/pages/technical-explanation The key concepts is remix is understanding the loader(), UI component, and action() interactions and how those work with minimal code changes in: 1) server side only mode (with only raw html served) 2) server + smart JS client mode

murkt 5y ago

Just generate these ids on the server. For example, when I render a new field for which I need a delete button, I send numbers of other fields along with them, and server renders a new field for me with a new id.

nvegater 5y ago
Thanks for responding. If I understand correctly, then I would need a server like nodejs or django generating and sending the "index.htmx" to the browser and then responding to users interactions by embedding the data from the server inside of the htmx files, correct?
- murkt 5y ago
  Sounds about right. It’s the good old server templates (we use Jinja), and for interactivity I have additional attributes here and there, and sometimes additional endpoints. It’s miles better than full-fledged JS SPA. I’ve had React+GraphQL app that I’m migrating piece by piece when we need a new feature, and it’s a few times faster to do and easier to understand.

recursivedoubts 5y ago

You generate all links on the server side, using Hypermedia As The Application of Engine State (HATEOAS): https://htmx.org/essays/hateoas/ https://htmx.org/essays/hateoas/

nvegater 5y ago
I went into the rabbit hole. There were 2 particularly useful links I found: https://htmx.org/essays/a-response-to-rich-harris/ https://htmx.org/essays/a-response-to-rich-harris/ https://htmx.org/examples/update-other-content/ https://htmx.org/examples/update-other-content/ Very interesting developing tech philosophy. I was a bit in the js bubble for a while. Its refreshing to see such a simple and powerful idea/tech outside of it:)
- trestacos 5y ago
  Thanks for finding/sharing those links. As I read them they reminded me a lot of what I've been seeing as I have been using Remix (remix.run) For example: in "how to update content", they discuss path dependent updates. Those are how remix does all it's updates - they use nested routes, so it knows it only needs to update a part of the page (eg only update the content of the page, leaving the nav alone, since an update occured only in the content part of the page) I think the htmx folks would have a lot of issues with remix but I think remix takes a lot of the best of both worlds. Remix focuses on using basic html/http concepts and layering some smart JavaScript on top of that. To return the favor, here's a couple docs I found helpful: https://remix.run/docs/en/v1/tutorials/jokes https://remix.run/docs/en/v1/tutorials/jokes - this is their advanced tutorial and it's a bit long but once you get past the setup steps it's a really well written introduction to the concepts of remix through useful examples. One of the better tutorials I've ever read. And then two of their technical docs which are a bit hidden in their site but useful: https://remix.run/docs/en/v1/pages/philosophy https://remix.run/docs/en/v1/pages/philosophy https://remix.run/docs/en/v1/pages/technical-explanation https://remix.run/docs/en/v1/pages/technical-explanation The key concepts is remix is understanding the loader(), UI component, and action() interactions and how those work with minimal code changes in: 1) server side only mode (with only raw html served) 2) server + smart JS client mode