Tags
Here's my thought on 💭 </> htmx loading glossary ~ The client-side-templates Extension
Using templates with htmx requires the client-side-templates extension, and the template engine to be loaded in a <script>
tag.
example htmx using templates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
<div hx-ext="client-side-templates">
<button hx-get="https://jsonplaceholder.typicode.com/todos/1"
hx-swap="innerHTML"
hx-target="#content"
mustache-template="foo">
Click Me
</button>
<p id="content">Start</p>
<template id="foo">
<p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
</template>
</div>
</body>
</html>
!!! note This post is a thought. It's a short note that I make about someone else's content online. Learn more about the process [[ thoughts ]]
{.text-opacity-80} This post was a thought by Waylon Walker see all my thoughts at https://waylonwalker.com/thoughts