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 -->

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

Risposte:


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()}"> 

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


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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.