💭 </> htmx ~ The client-side-templates Extension
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

!https://htmx.org/extensions/client-side-templates/

Date: July 28, 2023

External Link htmx.org

Using templates with [4m[38;2;248;248;242mhtmx[0m <[38;2;248;248;242m/htmx/[0m> requires the client-side-templates extension, and the template engine to be loaded in a [38;2;189;147;249m<script>[0m tag.

example htmx using templates.

[38;2;248;248;242m[code][0m
  <!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>

[38;2;68;71;90mNOTE[0m
[38;2;68;71;90m│ [0mThis post is a [4m[38;2;248;248;242mthought[0m <[38;2;248;248;242m/thoughts/[0m>. It’s a short note that I make about someone else’s content online #thoughts
