https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    I'll post the implementation and we can see what people think.
  • g
    That sounds great. I'll stay focused on making demos for now. After the push for 1.0, say "go" and I'll take a second look at #130.
  • m
    write a simple lexer they said
  • m
    it'll be fun they said
  • m
    > Guessing about 30-40 new lines of code @User really starting to piss me off, pass carson
  • m
    currently at around 80, w/ a proof of concept
  • m
    > @User A question. I wanted to add the 
    hx-vars="id: taskId"
    to the parent 
    li
    element instead of all the children as it is now. But then when I click on any child of 
    li
    I get three requests. Is that expected? @User no, that sounds like a bug
  • m
    which I really should work on before I do this tokenizing stuff :/
  • m
    @User I am trying to replicate with a simpler example, without success.
  • m
    @User So the issue is a bit different than I described. This is what triggers the two requests
    Copy code
    html
<div hx-get="outer">
    <input type="checkbox" hx-get="inner">
</div>
    outer first, inner second.
  • m
    And it only happens if the inner element is a checkbox. If it's a text field, only the outer request is triggered. If it's a link, only the inner request is triggered.
  • m
    Ah, OK
  • m
    we consume some events to prevent stuff like this, but it looks like maybe it isn't quite right for check boxes
  • m
    The behavior is also different for inputs vs. non-input fields. I would think in cases like this inner request always has priority. It's also true that it doesn't make a lot of sense to have this outer hx-get, so I am working to get rid of it. But it may be a test case.
  • m
  • m
    but otherwise let it go
  • m
    we could add a property to the event, 
    triggeredHtmxRequest
    and then, using the new conditional syntax, you could say something like:
    Copy code
    html
  <div hx-trigger='click[triggeredHtmxRequest==false]' ...>...</div>
  • m
    generally I don't like cancelling events, because the rest of the DOM should know what is happening
  • m
    but w/ forms we have to do it to prevent submission
  • m
    the new conditional syntax is coming along pretty nicely, despite my complaining. Figured out a more efficient way to tokenize stuff and have things like
    Copy code
    html
<div hx-trigger='keyup[["enter", "esc"].include(key)' ...>...</div>
    working in addition to the more basic
    Copy code
    html
<div hx-trigger='keyup[key=="enter"||key=="esc"]' ...>...</div>
  • m
    for the TODO app use case I want to get to this:
    Copy code
    html
<div hx-trigger="keydown[key=='enter'] condition:[value!=='']" ...>...</div>
  • m
    we could also integrate teh whole thing into the event filter by introducing another symbol:
    Copy code
    html
<div hx-trigger="keydown[key=='enter' && elt.value!=='']" ...>...</div>
  • m
    I like keeping it separate though
  • m
    with only one implicit symbol
  • g
    What about a syntax similar to the SSE connect: and swap:? That might be simpler to accomplish, and would be more consistent.
  • g
    hx-trigger=“keydown key:enter value:notEmpty filter:functionName”
  • g
    Where “notEmpty” is one of a handful of small helpers we define in the library and “filter” let’s you call an arbitrary function defined outside of HTMX
  • g
    Leave anything more complex to Hyperscript.
  • l
    So. I've got an odd question. Suppose that I've got an invoice. Each line item has it's own binding to the backend, using swap/etc. However, updating a line item requires calculation of some value, even trivial as a count of line items (or sum of amounts). How would this work in HTMX? The traditional React is to have some sort of re-render that simply counts on each update. The older JQuery would make a nest of event callbacks. I'm not sure what Alpine/View does, but I presume it'd use Proxy to have listeners, and then update.
  • l
    I guess what I'm asking is, I can see how htmx works locally in beautiful/simple ways; but, what about other aspects of the page that have to be updated?
1...484950...1146Latest