Alpine JS plugin x-jsz
allows you to use JSX/Moustache
like syntax for templating avoding the need for x-text
and x-html
and creating new DOM Nodes for each text/string you need to show.
Example how x-jsz
replaces the need for multiple with x-text
and with x-if
<div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
<p>
Hello I am <span x-text="name"></span> <template x-if="showSurname"><span x-text="surname"></span></template>
</p>
<p x-jsz>
Hello I am {{name}} {{ showSurname && surname }}
</p>
</div>
All the code within {{...}}
will be treated like JS code and handled by Alpine JS evaluate()
If you wish to use other Alpine JS directives within {{...}}
use the <template x-jsz>
<div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
<template x-jsz>
<p>
Hello I am {{name}} {{ showSurname && `<span x-text="surname"></span>` }}
</p>
</template>
</div>
Only ONE
root element should be used as all other will be ignored. x-jsz
directive will clone the root element and evaluate()
all its content. Which in this example results in
<div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
<template x-jsz>
<p>
Hello I am {{name}} {{ showSurname && `<span x-text="surname"></span>` }}
</p>
</template>
<p>
Hello I am Jhon <span x-text="surname">Doe</span>
</p>
</div>
Make sure to use correct HTML
tag as x-jsz will use it to create a new node after the template.
<script src="https://cdn.jsdelivr.net/npm/alpinejs-jsz@latest/dist/jsz.cdn.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
npm i -D alpinejs-jsz
or
yarn add -D alpinejs-jsz
Then you can register the plugin.
import Alpine from "alpinejs";
import jsz from "alpinejs-jsz";
Alpine.plugin(jsz);
window.Alpine = Alpine;
Alpine.start();