using data- * attribute mit thymeleaf

125

Kann ich mit thymeleaf das data- * -Attribut setzen?

Wie ich aus der Thymeleaf-Dokumentation verstanden habe, habe ich versucht:

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

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
html thymeleaf Alexandru Severin
quelle
7
Dies war ein Fehler, der für Thymeleaf 3.0 behoben wurde . Diese Frage ist nur für die Version vor 3.0 relevant. Für neuere th:data-el_idwird funktionieren.
GabiM

Antworten:

219

Ja, th:attrzur Rettung der Thymeleaf-Dokumentation - Festlegen von Attributwerten .

Für Ihr Szenario sollte dies folgende Aufgabe erfüllen:

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

Mit XML-Regeln können Sie ein Attribut nicht zweimal in einem Tag festlegen, sodass Sie nicht mehr als ein Attribut th:attrim selben Element haben können.

Hinweis: Wenn Sie mehr als ein Attribut möchten, trennen Sie die verschiedenen Attribute durch Komma: 

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}">
Aldrian
quelle
54
Nur eine Anmerkung für zukünftige Leser, Sie können nicht mehr als ein th: attr im selben Element haben, also verwenden Sie einfach eines und trennen Sie die verschiedenen Attribute durch Komma:th:attr="data-id=${element.getId()},data-name=${element.getName()}"
AntonioOtero
5
Wenn Sie eine Variable als Teil einer Zeichenfolge einfügen müssen, müssen Sie Folgendes tun:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"
einfügen Kababadisha
1
Der Kommentar von @AntonioOtero sollte Teil der Antwort sein.
Don Cheadle
Ich wünschte, die Attributverarbeitung wäre nicht auf bestimmte Attribute beschränkt, sondern würde allgemein behandelt. Hat jemand gehört, dass es Feature sein wird? (Schuld daran, ich habe die Version 3 noch nicht überprüft ;-)
Dirk Schumacher
7

Mit Thymeleaf 3.0 gibt es den Standardattributprozessor , der für jede Art von benutzerdefinierten Attributen verwendet werden kann, z. B. th:data-el_id=""wird data-el_id="", th:ng-app=""wirdng-app="" und so weiter. Der beliebte Datenattribut-Dialekt ist nicht mehr erforderlich.

Diese Lösung bevorzuge ich, wenn ich json als Wert verwenden möchte , anstatt:

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

Sie können verwenden (in Kombination mit wörtlicher Substitution ):

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

Update: Wenn Ihnen der thNamespace nicht gefällt , können Sie auch HTML5-freundliche Attribut- und Elementnamen verwenden wie verwenden data-th-data-foobar="".

Wenn jemand interessiert ist, finden Sie hier verwandte Template-Engine-Tests: Tests für den Standardattributprozessor

RiZKiT
quelle