5 ms·

You are missing the fact that html has very restricted list of events that can be defined in an attribute. Htmx allows to listen on any event, plus some extra f

• TekMol 3y ago
  What would be a simple example of an event that you want to define inline but can't in plain html? Can you give minimal example on jsfiddle so we can compare different approaches?
  • renerick 3y ago
    Here you go: https://plnkr.co/edit/DQJrBWWQFgHtpltf?open=index.html&preview https://plnkr.co/edit/DQJrBWWQFgHtpltf?open=index.html&previ... Another big aspect of allowing to handle any event is integration with other JS libraries. See this basic example of interacting with Sortable JS [1] Also, htmx has a response header called `HX-Trigger`[2] which lets server trigger custom events on the client and you can handle those events as well[3]. This is quite useful if you have interdependent data and you want to refresh regions on the page in response to user actions somewhere else (for which htmx allows multiple different patterns for different scenarios)[4] [1]: https://htmx.org/examples/sortable/ https://htmx.org/examples/sortable/ [2]: https://htmx.org/headers/hx-trigger/ https://htmx.org/headers/hx-trigger/ [3]: https://htmx.org/attributes/hx-trigger/#triggering-via-the-hx-trigger-header https://htmx.org/attributes/hx-trigger/#triggering-via-the-h... [4]: https://htmx.org/examples/update-other-content/ https://htmx.org/examples/update-other-content/
    • TekMol 3y ago
      Hmm... that does no look like a minimal example to me. Is this the relevant line? <div hx-get="/random" hx-trigger="every 2s"></div> If so, can you make an example with just that?
      • renerick 3y ago
        These are multiple minimal examples, they are completely self contained, independent of each other and separated by h1 tags. I separated those examples to different files: https://plnkr.co/edit/0TWYrtbMGP9UAzE4 https://plnkr.co/edit/0TWYrtbMGP9UAzE4 Also, you may notice there is <template/> tag. It's just for the demo [1], it serves as a mock endpoint [1]: https://htmx.org/docs/#creating-demos https://htmx.org/docs/#creating-demos
        • TekMol 3y ago
          Simpler version of example 1: https://jsfiddle.net/w6nrek81/ https://jsfiddle.net/w6nrek81/ No need to bring up multiple examples. We just need one to show that htmx makes something simpler. This isn't one though.
          • renerick 3y ago
            I'm sorry, but that's just not fair comparison. You requested a minimal example and then pick the simplest one and tell me that you can implement this minimal example with minimal code. Of course you can fill a div with a random number with Vanilla JS, it can even be just a one liner, but it's not the point. Your solution, for example, will break if the target div already has content in it. It also won't work if we want to insert the content after or before the element, you need to somehow keep track of the element being triggered, so it will grow more complex. And still, it won't work with custom events > No need to bring up multiple examples. We just need one to show that htmx makes something simpler. This approach is not productive. A single example could be easily dismissed on the ground that it's not enough to justify design decisions that htmx has. I wrote multiple examples and provided additional links specifically to show various use cases that htmx covers and to avoid playing ping-pong of tiny examples. > This isn't one though. You just picked one example, which also happened to be the simplest, and seemingly ignored everything else. I apologize, I don't know how to continue from here.
    • michaelcampbell 3y ago
      Thanks for this. The basis of many new apps, I suspect ;-)