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" и показать его.

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