x-cloak

Иногда, когда вы используете AlpineJS для части своего шаблона, возникает «всплеск», когда вы можете увидеть неинициализированный шаблон после загрузки страницы, но до загрузки Alpine.

x-cloak решает эту проблему, скрывая элемент, к которому он прикреплен, до тех пор, пока Alpine не будет полностью загружен на страницу.

Однако для того, чтобы x-cloak работал, нужно добавить на страницу следующий CSS:

[x-cloak] {
  display: none !important;
}

В следующем примере тег <span> будет скрыт до тех пор, пока для его x-show не будет установлено значение true, предотвращая любые «блики» скрытого элемента на странице при загрузке Alpine.

<span x-cloak x-show="false">
  Это не приведет к появлению «всплесков» на экране в любой момент времени
</span>

x-cloak работает не только на элементах, скрытых с помощью x-show или x-if: он также обеспечивает скрытие элементов, содержащих данные, до тех пор, пока эти данные не будут корректно установлены. В следующем примере тег <span> будет скрыт до тех пор, пока Alpine не установит его текстовое содержимое в свойство message.

<span x-cloak x-text="message"></span>

Когда Alpine загружается на странице, он удаляет свойство x-cloak из элемента, тем самым убирая свойство display: none;, тем самым показывая элемент.

Альтернатива глобальному синтаксису

Если вы хотите достичь такого же поведения, но избежать необходимости включать глобальный стиль, можно использовать следующий интересный, хотя и немного странный приём:

<template x-if="true">
  <span x-text="message"></span>
</template>

Это позволит достичь той же цели, что и x-cloak, просто используя принцип работы x-if.

Поскольку элементы <template> в браузерах «скрыты» по умолчанию, вы не увидите <span> до тех пор, пока Alpine не получит возможность отрендерить x-if="true" и показать его.

Опять же, это решение не для всех, но его стоит упомянуть для особых случаев.