directives/cloak/

[giscus[bot]]

directives/cloak/

Описание директивы x-cloak в Alpine.js

https://alpinejs.dragomano.ru/directives/cloak/

[oblominsk]

Я так понял . что x-cloak скрывает все.
Вот я его поставил на 76 строке. И он не работает.
Как скрыть весь блок слайдеров <div id="sliders" при загрузке ?
Не все так четко работает в этом Alpine.JS
Rain-Alpine.JS -- https://codepen.io/oblominsk/pen/pvjpZPe

[oblominsk]

X-show="open" работает, если таймером или ещё как менять ему состояние. Но я не могу понять, где затык. X-show используется везде, и там он работает. X-cloak странный, То ли он есть в Alpinе, То ли его нет. В стилях у меня прописано для него display:none в конце. Я могу для упрощения удалить сами слайдеры , это 90% кода, чтобы не мешали, и оставить только их рамку. Не понятно, почему эта чертова рамка не скрывается.
Если идти через стили, потом останется только через JS менять display, или opacity. Тогда получится, что и Alpine уже не нужен.
Сам Alpine работает здесь, и на нем проще многое вещи делать. Все цвета на нем. И после загрузки он работает правильно. Но вот сама загрузка страницы вызывает у него проблемы. Т е. такое поведение, что Alpine не работает в момент загрузки, поэтому и бесполезны все попытки.

[oblominsk]

В целом, можно признать, что Alpine свою функцию выполняет. X-show работает и даже без x-cloak.
Я нашел проблему. Это погода ломает Alpine. Если убрать async , то погода перестает давать инфо, зато запускается Alpine.
Слишком уж он нежный оказался ))

[oblominsk]

Но с другой стороны почему такая избирательность даже если погода своими асинхронными запросами и промысами блокирует весь код , то alpine работает наполовину , цветовые вопросы в :style. он выполняет. Но почему-то только x-show перестаёт работать , хотя какая связь.
Значит , :style в Alpine закодирован сильнее x-show. Надо бы им усилить работу над x-show.

[oblominsk]

Alpine.JS Rain
Все-таки я добил эту свою погоду и Alpine.
Работает со случайно найденным костылем -- $persist() на свойстве, которое нет смысла сохранять. Но этот $persist() каким-то образом перезагружет сам Alpine , и заставляет x-show работать , как ему положено.
Причем, перенос этого $persist() на соседние аналогичные свойства не имеет эффекта. Законное сохранение города на x-show не влияет. Очень загадочный костыль , я до сих пор его не понимаю.
(может, перенесу на Codepen , кто-то захочет поиграться)

Но в целом Alpine удобен. Это так мини-JS прямо в тегах.
Надеюсь на его развитие.