utilizzando l'attributo data- * con thymeleaf

125

Posso impostare l'attributo data- * con thymeleaf?

Come ho capito dalla documentazione di thymeleaf ho provato:

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

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

html thymeleaf

— Alexandru Severin
fonte

7

Questo era un bug, corretto per Thymeleaf 3.0 . Questa domanda è rilevante solo per la versione precedente alla 3.0. Per quelli più recenti th:data-el_idfunzionerà.

— GabiM

219

Sì, th:attrper salvare la documentazione di Thymeleaf - Impostazione dei valori degli attributi .

Per il tuo scenario, questo dovrebbe fare il lavoro:

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

Le regole XML non ti consentono di impostare un attributo due volte in un tag, quindi non puoi averne più di uno th:attrnello stesso elemento.

Nota: se desideri più di un attributo, separa i diversi attributi con una virgola:

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌ame()}">

— Aldrian
fonte

54

Solo una nota per i futuri lettori, non puoi avere più di un th: attr nello stesso elemento quindi usane uno e separa i diversi attributi con una virgola:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

5

Se è necessario includere una variabile come parte di una stringa, è necessario farlo:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

Il commento di @AntonioOtero dovrebbe essere parte della risposta.

— Don Cheadle

Vorrei che l'elaborazione degli attributi non fosse limitata a determinati attributi, ma piuttosto fosse generalmente gestita. Qualcuno ha sentito che sarà presente? (Beh, colpa a me, non ho ancora controllato la versione 3 ;-)

— Dirk Schumacher

11

Oppure puoi usare questo dialetto Thymeleaf https://github.com/mxab/thymeleaf-extras-data-attribute e sarai in grado di farlo

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

— Adrian Ber
fonte

7

Con Thymeleaf 3.0 c'è il Default Attribute Processor che può essere utilizzato per qualsiasi tipo di attributi personalizzati, ad esempio th:data-el_id=""diventa data-el_id="", th:ng-app=""diventang-app="" e così via. Non c'è più bisogno dell'amato dialetto degli attributi dei dati.

Questa soluzione la preferisco, se voglio usare json come valore, invece di:

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

Puoi usare (in combinazione con la sostituzione letterale ):

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

Aggiornamento: se non ti piace lo thspazio dei nomi, puoi anche utilizzare attributi amichevoli HTML5 e nomi di elementi comedata-th-data-foobar="" .

Se qualcuno è interessato, i test del motore di modelli correlati possono essere trovati qui: Test per il processore di attributi predefinito

— RiZKiT
fonte