используя атрибут 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 ;-)
Дирк Шумахер
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
источник