używając atrybutu data- * z thymeleaf

125

Czy mogę ustawić atrybut data- * z tymiankiem?

Jak zrozumiałem z dokumentacji grasicy, próbowałem:

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

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
html thymeleaf Alexandru Severin
źródło
7
To był błąd, naprawiony w Thymeleaf 3.0 . To pytanie dotyczy tylko wersji wcześniejszej niż 3.0. Dla nowszych th:data-el_idbędzie działać.
GabiM

Odpowiedzi:

219

Tak, th:attrna ratunek Dokumentacja Thymeleaf - Ustawianie wartości atrybutów .

W Twoim scenariuszu powinno to wystarczyć:

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

Reguły XML nie pozwalają na dwukrotne ustawienie atrybutu w tagu, więc nie możesz mieć więcej niż jednego th:attrw tym samym elemencie.

Uwaga: jeśli chcesz mieć więcej niż jeden atrybut, oddziel poszczególne atrybuty przecinkiem: 

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}">
Aldrian
źródło
54
Uwaga dla przyszłych czytelników, nie możesz mieć więcej niż jednego th: attr w tym samym elemencie, więc użyj jednego i oddziel poszczególne atrybuty przecinkiem:th:attr="data-id=${element.getId()},data-name=${element.getName()}"
AntonioOtero
5
Jeśli chcesz dołączyć zmienną jako część łańcucha, musisz to zrobić:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"
kabadisha
1
Komentarz @AntonioOtero powinien być częścią odpowiedzi.
Don Cheadle
Chciałbym, żeby przetwarzanie atrybutów nie było ograniczone do pewnych atrybutów, ale raczej było ogólnie obsługiwane. Czy ktoś słyszał, że będzie to funkcja? (Cóż, winę na mnie, jeszcze nie sprawdzałem wersji 3 ;-)
Dirk Schumacher
7

W Thymeleaf 3.0 istnieje domyślny procesor atrybutów, który może być użyty do dowolnego rodzaju niestandardowych atrybutów, np. th:data-el_id=""Staje się data-el_id="", th:ng-app=""staje się ng-app=""i tak dalej. Nie ma już potrzeby stosowania ulubionego dialektu atrybutów danych.

To rozwiązanie preferuję, jeśli chcę użyć json jako wartości, zamiast:

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

Możesz użyć (w połączeniu z podstawieniem dosłownym ):

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

Aktualizacja: Jeśli nie podoba Ci się thprzestrzeń nazw, możesz również użyć przyjaznych atrybutów HTML5 i nazw elementów, takich jak data-th-data-foobar="".

Jeśli ktoś jest zainteresowany, powiązane testy silnika szablonów można znaleźć tutaj: Testy dla domyślnego procesora atrybutów

RiZKiT
źródło