используя атрибут data- * с тимелеафом

126

Могу ли я установить атрибут data- * с помощью тимелеафа?

Как я понял из документации тимелеафа, я пробовал:

<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->

html thymeleaf

— Александру Северин
источник

7

Это была ошибка, исправленная в Thymeleaf 3.0 . Этот вопрос актуален только для версии до 3.0. Для более новых th:data-el_idбудет работать.

— GabiM

220

Да, th:attrна помощь документация Thymeleaf - Установка значений атрибутов .

Для вашего сценария это должно сработать:

<div th:attr="data-el_id=${element.getId()}">

Правила XML не позволяют устанавливать атрибут дважды в теге, поэтому th:attrв одном элементе не может быть более одного атрибута .

Примечание. Если вам нужно несколько атрибутов, разделите их запятыми:

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌ame()}">

— Алдриан
источник

54

Просто замечание для будущих читателей: у вас не может быть более одного th: attr в одном элементе, поэтому просто используйте один и th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— разделяйте

5

Если вам нужно включить переменную как часть строки, вам нужно сделать это:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

Комментарий @AntonioOtero должен быть частью ответа.

— Дон Чидл

Я хочу, чтобы обработка атрибутов не ограничивалась определенными атрибутами, а выполнялась в целом. Кто-нибудь слышал, что это будет особенность? (Ну вините меня, я еще не проверял версию 3 ;-)

— Дирк Шумахер

11

Или вы можете использовать этот диалект Thymeleaf https://github.com/mxab/thymeleaf-extras-data-attribute, и вы сможете сделать

<div data:el_id="${element.getId()}">

— Адриан Бер
источник

7

В Thymeleaf 3.0 есть обработчик атрибутов по умолчанию, который можно использовать для любых настраиваемых атрибутов, например, th:data-el_id=""становится data-el_id="", th:ng-app=""становится ng-app=""и так далее. Больше нет необходимости в любимом диалекте атрибутов данных.

Я предпочитаю это решение, если хочу использовать в качестве значения json вместо:

th:attr="data-foobar='{&quot;foo&quot:'+${bar}+'}'"

Вы можете использовать (в сочетании с буквальной заменой ):

th:data-foobar='|{"foo":${bar}}|'

Обновление: если вам не нравится thпространство имен, вы также можете использовать дружественный атрибут HTML5 и имена элементов, например data-th-data-foobar="".

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

— RiZKiT
источник