Вы когда-нибудь пытались создать 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 г.