Mallar på klientsidan med HTMX och mustache
Jag befinner mig sällan på framsidan av webben, men har haft rätt bra erfarenheter av HTMX som ett sätt för mig (som helst utvecklar för baksidan) att faktiskt få till lite interaktivitet i HTML, utan att för den skull behöva skriva någon (eller iaf inte speciellt mycket) JavaScript.
Idag började jag fundera på hur smidigt det skulle vara att använda en JSON-fil som datakälla för en tabell i en statisk HTML-fil.
Vanligtvis förväntar sig HTMX fragment av HTML som den kan pussla in i sidan man uppdaterar, detta går dock att komma runt genom att använda sig av HTMX-tillägget client-side-templates.
JSON
Vi börjar med denna enkla JSON-array innehållandes objekt med nycklarna url, name, och desc.
HTML
Sedan skriver vi en enkel HTML-fil där vi laddar in följande bibliotek:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Data</title>
<link rel="stylesheet" href="css/pico.fluid.classless.zinc.min.css">
<script src="js/htmx.min.js"></script>
<script src="js/htmx/client-side-templates.js"></script>
<script src="js/mustache.min.js"></script>
</head>
<body>
<main mustache-array-template="data"
hx-ext="client-side-templates"
hx-get="data.json"
hx-target="#rows"
hx-trigger="load">
<article>
<div style="overflow: auto;">
<table class="striped">
<tbody id="rows">
</tbody>
</table>
</div>
</article>
<script type="text/template" id="data">
{{#data}}
{{#name}}
<tr>
<th>
<a href="{{url}}">{{name}}</a>
</th>
</tr>
<tr>
<td>
<em>{{desc}}</em>
</td>
</tr>
{{/name}}
{{/data}}
</script>
</main>
</body>
</html>
Resultat
Via hx-trigger=”load” laddas vår data.json vid sidladdning, denna data appliceras sedan i en mustache-mall och de resulterande tabellraderna läggs till i den ursprungligen tomma tabellen;
/ Peter