Patterns For Two Way Binding

[oluatte]

Howdy,

Thanks a ton for all your hard work on Hyperscript!

We've recently switched to using Hyperscript after mostly using AlpineJS. One of the recurring gaps i've been seeing is with lightweight two way binding to forms. Even though our app is n MPA, there are several cases where we need to handle form submission in javascript (as opposed to posting back). In these cases, AlpineJS's x-model feature was incredibly useful as it provided lightweight two way binding.

I realize that Hyperscript has a different philosophy than AlpineJS, but i was wondering if there are any Hyperscript patterns that can simulate two way binding in this way. If such patterns exist, please point me to docs or examples. If not, what do you think of adding such functionality?

Thanks again.

[dz4k]

we need to handle form submission in javascript

What is it that you can't achieve by reading the values directly off the elements (#elt's value) or the whole form (#form as Values)?

[oluatte]

What is it that you can't achieve by reading the values directly off the elements (#elt's value) or the whole form (#form as Values)?

It is straightforward to read the form values on submit easily like you say. The difficulty is in relationship between inputs while they are filling in the form e.g.

• We have a set of buttons and an input text. Clicking any of those buttons sets the value of the input to a specific value. Whenever the value of the input matches the value of a button (whether due to typing or button click), we highlight the button.

This is just one interaction and we have several like this where selections in one area of the form are reflected elsewhere. We are able to do it in hyperscript using events, but the alpine version is a lot less verbose and complex (to us at least). This is why i asked the question.

[oluatte]

Here's another scenario:

On the left side of the page we have a user cart where the user can edit the list of items in the cart (amounts, remove, is gift etc). On the right side of the page we have a summary area (cart totals) that should stay in sync with the values on the form (e.g. total amount, total # items, total # of gift items).

What's a good way to do this in hyperscript without having to sprinkle events on each single input absolutely perfectly? I believe scenarios like this would benefit from the two binding type of feature i mentioned.

[dumblob]

@mayoatte did you solve it? If so, please describe and/or link to your code/blog_post/etc. as I would be eager to see how you solved it in those practical cases you have.

Thanks!

[oluatte]

@dumblob Nope. I stopped using hyperscript unfortunately. Still a happy user of HTMX but went back to vanilla js / ts for everything else.

[dumblob]

@mayoatte thanks, that makes sense to me.