Работа с атрибутом data-* в Thymeleaf: правильный синтаксис

Быстрый ответ

Для добавления атрибутов data-* в Thymeleaf применяется th:attr, который динамически связывает значения следующим образом:

<span th:attr="data-custom=${dataValue}">Текст</span>

Чтобы внести изменения, используйте переменную dataValue.

Один тег, несколько атрибутов data-*

Thymeleaf позволяет задавать несколько атрибутов data-* одновременно, перечисляя их через запятую в th:attr:

<div th:attr="data-id=${element.id},data-name=${element.name}"></div>

Аналогично заказу пиццы с различными ингредиентами, вы можете указать разные атрибуты, применив одно выражение! 🍕

HTML5 и Thymeleaf 3.0: упрощение написания атрибутов

С появлением Thymeleaf 3.0 работа с атрибутами стала гораздо более изящной благодаря стандартному обработчику атрибутов. Это исключило необходимость прибегать к дополнительным диалектам при работе с HTML5 или использовании атрибутов data-*.

<div data-id="${element.id}" data-name="${element.name}"></div>

Современный синтаксис радует своей простотой и краткостью, в полной мере соответствуя изящной структуре HTML5. Это аналогия перехода от рукописных писем к мгновенным сообщениям. 💬

Прямая вставка JSON с использованием литерального выражения

Thymeleaf даже умеет напрямую вставлять значения JSON в атрибуты data-*, обеспечивая правильность связывания данных и валидность JSON:

<button th:attr="data-config=${'{' + '\'url\':\'' + element.url + '\'' + '}'}">Кликни здесь</button>

Это сродни ощущению идеально подогнанного костюма, сшитого на заказ! 🕴️

Визуализация

Представление атрибутов data-* в коде HTML можно сравнить с использованием уникальных тегов в постах на Instagram:

📸 Снимок Thymeleaf: <div th:text="${tool.name}" data-tool-id="${tool.id}"></div>

Атрибут data-tool-id также можно сравнить с любимым хештегом, который помогает другим найти ваши сообщения в будущем.

Как это было раньше: 🧐 ...как называлось это уютное кафе? Теперь стало: ☕🔍✅ ...Вот оно, это было #ЛучшееКофеВечно.

Атрибуты в HTML служат в качестве хештегов для ваших постов, причем атрибуты data-* — это ваши уникальные хештеги, которые делают контент легко отслеживаемым! 🌐

Стандарты XML при использовании Thymeleaf

Несмотря на то, что Thymeleaf генерирует HTML, он придерживается соблюдения стандартов XML. Следует учесть несколько правил XML:

• Избегайте повторения атрибутов в одном и том же теге.
• Следуйте правильному синтаксису Thymeleaf.

Считайте эти принципы правилами этикета во время международного путешествия. 🛄 Проблемы с синтаксисом могут вызвать замедления!

Расширение функционала с помощью диалектов Thymeleaf

Если вам кажется, что базовый набор функций Thymeleaf не достаточно полон, то существуют диалекты, предоставляющие дополнительные возможности:

Открыть на GitHub: thymeleaf-extras-data-attribute

Это как найти скрытый ход в древней библиотеке, который дополняет классические функции Thymeleaf новыми аспектами использования. 📚

Полезные материалы

1. Учебник по использованию Thymeleaf — на этой странице документации Thymeleaf рассказывается на примерах о работе с атрибутами data-*.
2. Пять минут для полета со стандартным диалектом Thymeleaf — обучающий материал о динамических атрибутах в Thymeleaf, включая data-*.
3. Применение data-атрибутов в веб-разработке (MDN) — руководство по data-* атрибутам, которое является важной составляющей инструментария HTML5.
4. Замена строчных значений массива ключами массива на Stack Overflow — тема, посвященная использованию data-* атрибутов в Thymeleaf на Stack Overflow.
5. [[ВАЖНОЕ ОБНОВЛЕНИЕ] Фрагменты выражений в репозитории thymeleaf на GitHub](https://github.com/thymeleaf/thymeleaf/issues/451) — дискуссия о методах обработки data-* атрибутов в Thymeleaf.