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

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

11

Oder Sie können diesen Thymeleaf-Dialekt verwenden https://github.com/mxab/thymeleaf-extras-data-attribute und Sie werden in der Lage sein , do

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

— Adrian Ber
quelle

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