Микроразметка

Микроразметка в интерфейсных компонентах выбора данных представляет собой способ обогащения DOM-структуры дополнительной семантикой, которая сохраняется при трансформации стандартного <select> в интерактивный компонент. В библиотеке Tom Select это приобретает практическое значение, поскольку исходный HTML-элемент заменяется на сложную структуру, где важна передача метаданных, атрибутов и структурированных данных между состояниями «исходный select → внутреннее представление → пользовательский интерфейс → сериализация формы».

Сохранение семантики исходного <option>

Базовый HTML <option> поддерживает ограниченный набор атрибутов, однако в реальных приложениях часто требуется передавать дополнительные поля:

  • идентификаторы сущностей
  • SEO-метки
  • структурированные данные для аналитики
  • данные для отображения в кастомных шаблонах
  • микроразметка для последующей сериализации

Tom Select при инициализации считывает DOM-структуру и преобразует <option> в внутренний объект вида:

{
  value: "123",
  text: "Product name",
  $order: 1,
  custom_field: "..."
}

Расширение этого объекта достигается через:

  • data-* атрибуты
  • кастомные парсеры
  • dataAttr конфигурацию
  • хуки create, load, parse

Использование data-атрибутов как микроразметки

Наиболее устойчивый механизм передачи микроразметки — использование data-* атрибутов в <option>:

<select id="select">
  <option value="1" data-category="books" data-rating="4.8" data-sku="A-991">
    Clean Code
  </option>
</select>

При инициализации Tom Select эти значения могут быть извлечены и включены в объект опции:

new TomSelect("#select", {
  dataAttr: "data-*"
});

Результатом становится расширенный набор полей внутри объекта опции, доступных в шаблонах отображения.

Микроразметка и шаблоны отображения

Tom Select активно использует шаблоны:

  • option
  • item
  • option_create

Микроразметка становится доступной внутри этих шаблонов через объект данных:

new TomSelect("#select", {
  render: {
    option: function(data, escape) {
      return `
        <div class="option">
          <span class="title">${escape(data.text)}</span>
          <span class="meta">${escape(data.category)}</span>
          <span class="rating">${escape(data.rating)}</span>
        </div>
      `;
    }
  }
});

Таким образом, data-* поля становятся частью визуального слоя, но не теряются при сериализации.

Расширение микроразметки через кастомные поля

В случаях, когда data-* недостаточно, применяется явное расширение данных через API загрузки:

new TomSelect("#select", {
  load: function(query, callback) {
    fetch("/api/items?q=" + encodeURIComponent(query))
      .then(res => res.json())
      .then(data => {
        callback(data.items.map(item => ({
          value: item.id,
          text: item.name,
          category: item.category,
          seo: item.slug,
          analytics: {
            position: item.position,
            source: item.source
          }
        })));
      });
  }
});

Такой подход превращает микроразметку в полноценную структуру данных, не ограниченную HTML.

dataAttr и управление извлечением атрибутов

Опция dataAttr управляет тем, какие атрибуты считываются из DOM:

  • data-*
  • произвольные атрибуты
  • полное отключение извлечения

Пример строгого контроля:

new TomSelect("#select", {
  dataAttr: "data-category,data-rating,data-sku"
});

Это позволяет ограничить поверхность данных и избежать попадания лишней информации в модель компонента.

Микроразметка в режиме динамической загрузки

При использовании AJAX-источников структура данных становится единственным носителем микроразметки. В таких сценариях важно разделять:

  • отображаемые поля (text)
  • технические поля (id, uuid)
  • аналитические поля
  • поля SEO и семантики

Пример структурирования:

{
  value: "42",
  text: "Item name",
  meta: {
    category: "electronics",
    brand: "XCorp"
  },
  schema: {
    type: "Product",
    id: "https://example.com/item/42"
  }
}

Интеграция schema.org и структурированных данных

Микроразметка может включать данные формата schema.org, особенно в случаях, когда выпадающий список используется для выбора сущностей каталога.

Пример интеграции:

render: {
  option: function(data, escape) {
    return `
      <div itemscope itemtype="https://schema.org/Product">
        <span itemprop="name">${escape(data.text)}</span>
        <meta itemprop="sku" content="${escape(data.value)}">
        <span itemprop="category">${escape(data.category)}</span>
      </div>
    `;
  }
}

В этом случае Tom Select выступает не только как UI-компонент, но и как контейнер для структурированных данных, сохраняемых в DOM.

Микроразметка и сериализация формы

При отправке формы Tom Select преобразует выбранные значения обратно в стандартный формат <select>. Однако дополнительные данные не сериализуются автоматически.

Для сохранения микроразметки применяются стратегии:

  • скрытые input-поля
  • JSON-агрегация перед отправкой
  • синхронизация через события change

Пример синхронизации:

const select = new TomSelect("#select");

select.on("change", function(values) {
  const items = values.map(v => select.options[v]);
  document.querySelector("#payload").value = JSON.stringify(items);
});

Обработка микроразметки в item и option слоях

Внутренне Tom Select различает:

  • оригинальные <option>
  • объекты options
  • выбранные items
  • DOM-узлы item и dropdown option

Микроразметка может быть привязана к каждому уровню:

  • на уровне option — хранение исходных данных
  • на уровне item — отображение выбранного значения
  • на уровне dropdown — расширенный список с метаданными

Потеря микроразметки при рендеринге и её предотвращение

Типичная проблема заключается в том, что кастомные поля исчезают при повторном создании экземпляра или при обновлении данных через setValue.

Причины:

  • пересборка options из упрощённого массива
  • отсутствие полного объекта при addOption
  • использование только массива значений вместо объектов

Корректный подход:

select.addOption({
  value: "10",
  text: "Name",
  category: "books",
  rating: 5
});

Микроразметка и плагины Tom Select

Некоторые плагины изменяют поведение DOM и могут влиять на сохранение данных:

  • remove_button
  • checkbox_options
  • virtual_scroll

При их использовании важно учитывать, что DOM-слой становится вторичным по отношению к объектной модели, поэтому микроразметка должна храниться в options, а не в HTML.

Практика структурирования сложных объектов

При работе с каталожными интерфейсами микроразметка часто принимает форму вложенных объектов:

{
  value: "1001",
  text: "Laptop Pro",
  attributes: {
    cpu: "M-series",
    ram: "16GB",
    storage: "512GB"
  },
  seo: {
    title: "Laptop Pro 16GB",
    url: "/products/1001"
  },
  analytics: {
    impression_id: "abc123",
    campaign: "winter_sale"
  }
}

Такой подход обеспечивает разделение ответственности между слоями:

  • UI слой — text
  • бизнес слой — attributes
  • маркетинг слой — seo
  • аналитический слой — analytics

Микроразметка и контроль целостности данных

При масштабных приложениях возникает необходимость валидации микроразметки:

  • проверка наличия обязательных полей
  • нормализация структуры перед загрузкой
  • предотвращение конфликтов ключей

Часто используется схема-валидация до передачи в Tom Select, поскольку библиотека не накладывает строгих ограничений на структуру объектов.

Расширенные паттерны использования микроразметки

Сложные интерфейсы используют Tom Select как слой агрегации данных:

  • мультиселект с семантическими тегами
  • фильтры с категориальной структурой
  • связь «master-detail» в одном компоненте
  • комбинированные поля поиска и выбора

Во всех случаях микроразметка становится не дополнением, а основной моделью данных, на основе которой строится поведение компонента и внешний API формы.

Оглавление