How to use something like partials in HandlebarsJS

[bartonhammond]

I'm switching from https://handlebarsjs.com/ and was using Partials. With Alpine I can use x-html and have this in my Alpine component:

 errorMessageHTML: `
	<div style="color: red"  
		x-show="errorMessage"  
		x-text="errorMessage"
		x-bind:aria-invalid="errorMessage ? true : null">
	</div>`,

and reference like: <span x-html="errorMessageHTML"></span>

But I don't like have html stuck inside my js code and some of the other partials are more complex. I'd rather maybe read the errorMessage.html and use that.

Do you have a recommendation of how to do this?

Oh - and by the way - thanks for this project - I'm replaceing express and handlebarsjs

[rehhouari]

glad you found this helpful!
as for your question, I'm not familiar with handlebars but it seems Partials are made for re-usability.
this plugin's templates are meant for displaying pages rather than a full fledged templating system such as handlebars so i'm not sure if you can achieve this without another plugin.

what I do myself is I've started using Astro.js along with Alpine.js and pinecone router, the former has a component system with no client-side runtime and builds into html.
of course this isn't a valid solution if you don't use or want to use a build tool.

you can however implement a simple utility to fetch html files and show them conditionally, something like this:

<script>
document.addEventListener('alpine:init', () => {
    Alpine.magic('partial', () => filename => {
        return fetch(`/${filename}.html`).then(r => r.text())
    })
})
</script>
<div x-html="$partial('navbar')'"></div>

this is very basic but you can get the idea, you can then add simple caching by just keeping the html content in dict with the url as a key etc. Or maybe use a directive instead and automatically change the elements content, something like <div x-partial="partial"></div> (see docs)

hope this helps!