The alpine-morph Расширение
Alpine.js теперь имеет лёгкий плагин morph, и это расширение позволяет использовать его в качестве механизма переключения в htmx, что необходимо для сохранения состояния Alpine, когда весь компонент Alpine заменяется htmx.
Установка
<script src="https://unpkg.com/htmx.org/dist/ext/alpine-morph.js"></script>
Использование
<header>
<script src="https://unpkg.com/htmx.org@latest"></script>
<script src="https://unpkg.com/htmx.org@latest/dist/ext/alpine-morph.js"></script>
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/morph@3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</header>
<body>
<div hx-target="this" hx-ext="alpine-morph" hx-swap="morph">
<div x-data="{ count: 0, replaced: false,
message: 'Change me, then press the button!' }">
<input type="text" x-model="message">
<div x-text="count"></div>
<button x-bind:style="replaced && {'backgroundColor': '#fecaca'}"
x-on:click="replaced = true; count++"
hx-get="/swap">
Morph
</button>
</div>
</div>
</body>
В приведённом выше примере все состояния Alpine x-data (count, replaced и message) сохраняются, даже если весь компонент Alpine заменяется.
ПРИМЕЧАНИЕ: /swap ответ из приведённого выше примера должен возвращать фактический элемент, который заменяется (это <div hx-target="this"... элемент).
Licensed under the Zero-Clause BSD License.
https://htmx.org/extensions/alpine-morph/
