Вы когда-нибудь пытались создать HTML-страницу из дизайна и задавались вопросом, как я могу создать цикл для этого элемента (например, списка продуктов электронной коммерции), чтобы я мог написать CSS для одного элемента и применить его ко всем этим спискам без копирования и вставки? ?
Использование движка шаблонов, такого как лезвие, тимелеаф или дзиндзя, кажется излишним для такого небольшого проекта, верно?
Введите Alpine.js, это библиотека Javascript, позволяющая создать определенный цикл элементов и заполнить его данными из объекта Javascript.
Шаги для его создания:
- добавьте alpine.js в раздел заголовка вашего HTML
- создать цикл данных
- получить данные по шаблону
- зациклить и показать данные
Создать циклические данные
Создайте функцию внутри тега скрипта чуть выше тега </body>
..
<body>
...
<script>
function theData() {
return {
produk: [
{
name: "Boaty McBoatface",
price: "$300.000",
},
{
name: "WD-40",
price: "$45.000",
},
{
name: "Bugs for lyfe",
price: "$105.000",
},
]};
}
</script>
</body>
Получить данные в HTML
Нам нужно сделать его доступным в HTML. Используйте x-data
из alpine.js, чтобы получить список продуктов выше.
<div x-data="theData()">
<!-- This will make the array of produk available inside this div -->
</div>
x-data
сделает все данные и функции (поведение) внутри функции theData()
доступными внутри области div.
Зациклить и распечатать
<div x-data="produk()">
<!-- This will make the array of produk available inside this div -->
<template>
<div x-for="item in produk">
<h1 x-text="item.name"></h1>
<h4 x-text="item.price"></h4>
</div>
</template>
</div>
x-for
-> будет повторять свойство produk
внутри того, что доступно из области x-data
<template>
-› x-for
ОБЯЗАТЕЛЬНО используйте этот тег. Не удалось использовать стандартные теги HTML
x-text
-> обновит innerText
элемента
И это все! немного, чтобы обернуть голову, если вы не знаете о шаблонах на интерфейсной платформе, такой как Vue.js, но это так просто и понятно.
Первоначально опубликовано на https://ynrfin.com 26 февраля 2020 г.