search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
35.76k stars 1.21k forks source link

Handelbars client-side-templates not rendering correctly #1801

Open Natetronn opened 10 months ago

Natetronn commented 10 months ago

On the off chance I'm not just an idiot and it's a bug, am I doing Handlebars client side templates correctly? I have the following template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTMX Client Side Templates - Handlebars</title>
  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://jsonplaceholder.typicode.com/todos/1" 
            hx-swap="innerHTML"
            hx-target="#content"
            handlebars-template="foo">
      Click Me
    </button>

    <p id="content">Start</p>

    <template id="foo">
      <p>{{userId}} and {{id}} and {{title}} and {{completed}}</p>
    </template>
  </div>
</body>
</html>

Instead of the hx-target being replaced with what you'd expect (1 and 1 and delectus aut autem and false), it's being replaced with the json object itself:

{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }

You can see it in action over at jsbin

Natetronn commented 10 months ago

Okay, set it up locally and now I see I'm getting the following console error:

TypeError: Handlebars.partials[templateName] is not a function
    at Object.transformResponse (client-side-templates.js:20:53)
    at htmx.org@latest:1:40641
    at htmx.org@latest:1:25128
    at te (htmx.org@latest:1:4348)
    at w (htmx.org@latest:1:25103)
    at Sr (htmx.org@latest:1:40621)
    at m.onload (htmx.org@latest:1:38101)
Natetronn commented 10 months ago

Hmm, maybe I'm using an older version somehow? Okay, looks like it:

I can confirm the following update does indeed fix the problem (I ran a local version to test it) https://github.com/russ4stall/htmx/commit/c2d4ea6d889c49fdba051a840a5148b0824b6512

https://github.com/bigskysoftware/htmx/issues/801

Doesn't appear to have made its way in htmx proper, however: https://github.com/bigskysoftware/htmx/blob/master/src/ext/client-side-templates.js

arouel commented 10 months ago

I also ran into this problem. I would appreciate this gets fixed and released, see Pull Request #1836.