mw3i · March 21, 2025 16:47 · mw3i · Feb 14, 2025
diff --git a/automatic-templating-with-alpine.html b/automatic-templating-with-alpine.html
 <!DOCTYPE html>
 <!-- 
 here's an absurdly easy way of automatic client-side templating with alpine js -- where the only thing that needs to be defined is (1) the api endpoint you pull the data from, and (2) the id of the template you want the data routed to. 

 we'll use client-side nunjucks in this example, but any client-side templating engine would work probably

 this feels incredibly straightforward and useful, and there may be huge downsides but I can't think of them yet

 also, alpine.js already makes it really easy to do templating, with x-text and other attributes. but with this approach you get the smooth syntax of a templating engine like nunjucks

 You can test this out by just saving as an html file and opening with your browser. We pull data from https://jsonplaceholder.typicode.com in this example
 -->
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Alpine.js with Nunjucks</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/browser/nunjucks.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
 </head>
 <body>

 <!-- this section defines a new, custom alpine.js directive called "fetch-to-template". you only define this once (at the beginning); never have to do this again -->
 <script>
    document.addEventListener('alpine:init', () => {
        Alpine.directive('fetch-to-template', (el, { expression }, { evaluate }) => {
            const config = evaluate(expression);
            const url = config.url;
            const target_id = config.target_id;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    let templateElement;

                    // If `id` is provided, use that; otherwise, fallback to first <template> in `el`
                    if (target_id) {
                        templateElement = el.querySelector(target_id);
                    } else {
                        templateElement = el;
                    }

                    if (!templateElement) {
                        console.error('Template not found.');
                        return;
                    }

                    const template = templateElement.innerHTML;
                    const rendered = nunjucks.renderString(template, { data });
                    el.innerHTML = rendered;
                });
        });
    });
 </script>


 <!-- Now, anywhere in your site, you can define a add the x-fetch-to-template, and it routes the data to the template you define. It doesn't even have to be a template. If you want, you can just route it to the div itself; just leave target_id blank -->
 <div class="uk-container uk-margin-top" x-data>
    <h1 class="uk-heading-medium">Top 10 Users</h1>
    <div x-fetch-to-template="{ url: 'https://jsonplaceholder.typicode.com/users', target_id: '#someTemplate' }">
        <template id='someTemplate'>
            {% for user in data %}
            <p>{{user.name}} at {{user.email}} is with {{user.company.name}}</p>
            {% endfor %}
        </template>
    </div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<!--
	here's an absurdly easy way of automatic client-side templating with alpine js -- where the only thing that needs to be defined is (1) the api endpoint you pull the data from, and (2) the id of the template you want the data routed to.

	we'll use client-side nunjucks in this example, but any client-side templating engine would work probably

	this feels incredibly straightforward and useful, and there may be huge downsides but I can't think of them yet

	also, alpine.js already makes it really easy to do templating, with x-text and other attributes. but with this approach you get the smooth syntax of a templating engine like nunjucks

	You can test this out by just saving as an html file and opening with your browser. We pull data from https://jsonplaceholder.typicode.com in this example
	-->
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Alpine.js with Nunjucks</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/browser/nunjucks.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
	</head>
	<body>

	<!-- this section defines a new, custom alpine.js directive called "fetch-to-template". you only define this once (at the beginning); never have to do this again -->
	<script>
	document.addEventListener('alpine:init', () => {
	Alpine.directive('fetch-to-template', (el, { expression }, { evaluate }) => {
	const config = evaluate(expression);
	const url = config.url;
	const target_id = config.target_id;

	fetch(url)
	.then(response => response.json())
	.then(data => {
	let templateElement;

	// If `id` is provided, use that; otherwise, fallback to first <template> in `el`
	if (target_id) {
	templateElement = el.querySelector(target_id);
	} else {
	templateElement = el;
	}

	if (!templateElement) {
	console.error('Template not found.');
	return;
	}

	const template = templateElement.innerHTML;
	const rendered = nunjucks.renderString(template, { data });
	el.innerHTML = rendered;
	});
	});
	});
	</script>


	<!-- Now, anywhere in your site, you can define a add the x-fetch-to-template, and it routes the data to the template you define. It doesn't even have to be a template. If you want, you can just route it to the div itself; just leave target_id blank -->
	<div class="uk-container uk-margin-top" x-data>
	<h1 class="uk-heading-medium">Top 10 Users</h1>
	<div x-fetch-to-template="{ url: 'https://jsonplaceholder.typicode.com/users', target_id: '#someTemplate' }">
	<template id='someTemplate'>
	{% for user in data %}
	<p>{{user.name}} at {{user.email}} is with {{user.company.name}}</p>
	{% endfor %}
	</template>
	</div>
	</div>

	</body>
	</html>