htmx
htmx copied to clipboard
bigskysoftware
templating overwrites "this" in <td> tag
I thought this was a handlebars error but this fiddle works fine: https://jsfiddle.net/onzew2s1/1/
Fiddle code:
<script src="https://unpkg.com/handlebars@latest/dist/handlebars.js"></script>
<script>
Handlebars.registerHelper('stringify', function(arg1) {
return JSON.stringify(arg1);
});
</script>
<!--
If you need a specific version:
<script src="https://unpkg.com/[email protected]/dist/handlebars.js"></script> -->
<div id="output"></div>
<script type="template/handlebars" id="template">
global this: {{stringify this}} <br/>
table start <br/>
<table id="tiles">
<tbody>
{{#each tiles}}
<tr>
{{#each this}}
outside of td: {{stringify this}} <br/>
<td>
td: {{stringify this}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
table done
</script>
It has this output:
global this: {"tiles":[["a","b"],["c","d"]]}
table start
outside of td: "a"
outside of td: "b"
outside of td: "c"
outside of td: "d"
td: "a" td: "b"
td: "c" td: "d"
table done
In contrast, my htmx code with the same input (shown to be identical with stringify):
<!DOCTYPE html>
<html lang="en">
<head>
<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/handlebars@latest/dist/handlebars.js"></script>
<script>
Handlebars.registerHelper('stringify', function(arg1) {
return JSON.stringify(arg1);
});
</script>
</head>
<body hx-ext="client-side-templates">
<div hx-trigger="load" hx-get="/api/world" hx-swap="outerHTML" handlebars-template="template-world"></div>
<template id="template-world">
<div id="world">
global this: {{stringify this}} <br/>
table start <br/>
<table id="tiles">
<tbody>
{{#each tiles}}
<tr>
{{#each this}}
outside of td: {{stringify this}} <br/>
<td>
td: {{stringify this}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
table done
</div>
</template>
</body>
</html>
has this output:
global this: {"tiles":[["a","b"],["c","d"]]}
table start
outside of td: "a"
outside of td: "b"
outside of td: "c"
outside of td: "d"
td: {"tiles":[["a","b"],["c","d"]]}
table done
