Циклы используются там, где нужно повторить какой-то html-вывод по единому шаблону. Я уже показывал пример использования при выводе данных, полученных по Ajax.
То есть первый вид цикла — это обход готового массива данных. Второй вариант — это цикл с заданным количеством итераций.
В Alpine.js для организации циклов используется директива x-for. Как и x-ifона может применяться только к тэгу TEMPLATE и иметь один корневой элемент.
Чтобы показать или скрыть блок используется директива x-show, однако существует ещё одна альтернатива — x-if. Работают они одинаково, с той разницей, что x-showможно применить к любому html-тэгу, а x-ifработает только с тэгом TEMPLATE.
Этот тэг имеет особое значение в HTML 5 — по умолчанию он скрыт и применяется для «отложенного создания клиентского контента». Его содержимое является шаблоном/фрагментом, который инициализируется (отображается) через JavaScript. Тэг TEMPLATE является «базовым» при использовании веб-компонентов. В Alpine.js он играет туже самую роль, хотя и с небольшим ограничением — в него должен быть вложен тэг-контейнер (об этом ниже).
Таким образом вопрос использования x-ifлежит скорее в плоскости предпочтений вебмастера.
Использование Alpine делает html-код несколько сложнее, поскольку на уровень HTML по сути выносится логика JavaScript. Да, директивы несложные, но, если стоит задача повторить элемент несколько раз, то хочется всё-таки какого-то упрощения.
Для этого в Alpine.js используется директива x-spread, которая ссылается на функцию-обработчик текущего компонента. Общая схема получается такой: в x-dataпрописываем функцию инициализации, которая и содержит объект со всеми функциями компонента.
В таком варианте можно говорить о компонентом подходе в Alpine, где функции могут использоваться многократно. Рассмотрим пару примеров.
Обычно для организации модального окна (js) используют сторонние jQuery-плагины. В общем-то это не удивительно, поскольку для этого требуется не только особая html-разметка, но и отслеживание различных событий.
На нативном JavaScript модальное окно реализуется ещё сложнее, поскольку нужно отслеживать события для открытия, закрытия окна, а также клик вне самого окна. Конечно, всё это делается в виде отдельной функции. Например так я сделал свой вариант в Berry CSS.
Кроме этого, модальное окно как правило требует css-классов, поскольку нужно особое позиционирование. Всё это приводит к тому, что в 99% случаев модальные окна создаются через дополнительные зависимости. В этом разрезе интересно будет посмотреть как Alpine.js сможет справиться с этой задачкой.
Я рассматриваю Alpine.js в первую очередь, как альтернативу jQuery, поэтому нужно разобраться как в Alpine выполнять то, что давно уже привычно в jQuery. Отправка AJAX как раз один из таких моментов.
Хочу показать несколько примеров AJAX, правда вместо привычного XMLHttpRequest(), я буду использовать fetch(). Эта возможность уже года 3 как доступна во всех браузерах. Сам по себе fetch()несложен, хотя есть разные нюансы. Я к тому, если вы не понимаете что это такое, то погуглите, информации полно.
Итак, для начала сделаем простой пример получения json-данных и выводе их на сайте.
Я давно уже присматриваюсь к Alpine.js, поскольку этот js-фреймворк разительно выделяется из ряда других. По своей сути он очень близок к Vue.js, но при этом может работать как привычный jQuery.
Основной массе разработчиков просто не нужны все те «фишки», что предлагают React или Vue. Вообще работа с JavaScript всегда происходит по одному алгоритму — вначале получили элемент/элементы на странице, после делаем с ними какие-то манипуляции.
Точно также работает и система событий — прописали либо onclick к нужному html-элементу, либо навесили событие через «слушатель» addEventListener и дальше через js-функцию делаем что нужно. Поскольку JavaScript очень уж многословен, а во многих случаях и неочевиден, то и возникли библиотеки функций — jQuery как раз одна из них. С их помощью работать с js намного приятней.