використовуючи атрибут data- * з чебрецем

125

Чи можна встановити атрибут 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

219

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

— Aldrian
джерело

54

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

— AntonioOtero

5

Якщо вам потрібно включити змінну як частину рядка, вам потрібно це зробити:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

Коментар @AntonioOtero має бути частиною відповіді.

— Don Cheadle

Я б хотів, щоб обробка атрибутів не обмежувалася певними атрибутами, а загалом оброблялася. Хтось чув, що це буде особливість? (Ну звинувачуйте мене, я ще не перевірив версію 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
джерело