htmx
htmx copied to clipboard
bigskysoftware
Proposal: `hx-template` attribute as alternative to `hx-post`, `hx-get`, etc
A great thing about HTMX is its ability to reduce network round trips and thereby improve performance 1 2.
However, the 'Click to Edit' example still suffers from unnecessary network calls to load the edit UI.
In this case, and the vast majority of similar cases, the edit UI is statically known and can be served with the initial request.
To solve this, I propose that we add a new attribute hx-template, as an alternative to hx-post, hx-get, etc.
The attribute value will be the ID of a template element. Note that a template's contents are not rendered on page load.
When the element with hx-template is triggered, htmx will do something like
let template = document.getElementById('<my-template-id>')
let content = template.content.cloneNode(true)
htmxTarget.appendChild(content) // or whatever
The Click to Edit example can then become:
<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: Joe</div>
<div><label>Last Name</label>: Blow</div>
<div><label>Email</label>: [email protected]</div>
<button hx-template="editContact1" class="btn btn-primary">
Click To Edit
</button>
</div>
<template id="editContact1">
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
<div>
<label>First Name</label>
<input type="text" name="firstName" value="Joe">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lastName" value="Blow">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" value="[email protected]">
</div>
<button class="btn">Submit</button>
<button class="btn" hx-template="viewContact1">Cancel</button>
</form>
</template>
<template id="viewContact1">
<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: Joe</div>
<div><label>Last Name</label>: Blow</div>
<div><label>Email</label>: [email protected]</div>
<button hx-template="editContact1" class="btn btn-primary">
Click To Edit
</button>
</div>
</template>
(Note that I also added a template for the Cancel button).
Yes, exactly! I had not seen that github issue.
On Sat, May 13, 2023, 6:59 AM Bo @.***> wrote:
Is this the same idea behind #960 https://github.com/bigskysoftware/htmx/issues/960 ?
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/1432#issuecomment-1546659227, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQOKNXPQBMGZOYXELMVHHLXF6HURANCNFSM6AAAAAAX46PETQ . You are receiving this because you authored the thread.Message ID: @.***>
edit UI is statically known
I'm confused by this statement. Your static template has a hard-coded user Joe Blow. Certainly you have other users ;) Or is you use case just doing UX mockups?
Here's an example done with client-side templates and an echo web service. Note that edits work and are round-tripped.
https://codepen.io/charring/pen/dyaqPgx
Your static template has a hard-coded user Joe Blow. Certainly you have other users
You wouldn't use Joe Blow in the edit template for every user. You'd insert the user details into the template when sending the response. That way, when a user clicks 'edit', we don't need to fetch anything from the server.
@AugustNagro Okay. But then that's not really a "template", and I'm not sure how it saves network traffic if you're sending a new one for each user.
It looks like hx-template complements existing features of htmx well and has wide applications. Actually, one of the first complaints I had when I learned htmx was the number of small partial responses I had to send from the server, and hx-template can effectively reduce that. Have the core developers thought of adding it to htmx, or at least welcome a PR? @1cg?
It looks like a nice idea for not-too-big swappable content without server interaction. I think this would be a good addition to HTMX.
