использование атрибута data-* с thymeleaf

#html #thymeleaf

#HTML #thymeleaf

Вопрос:

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

Как я понял из документации thymeleaf, я попытался:

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

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

Ответ №1:

Да, 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()}">

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

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

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

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

Ответ №2:

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

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

Ответ №3:

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

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

 th:attr="data-foobar='{amp;quot;fooamp;quot:' ${bar} '}'"

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

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

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

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