utilisation de l'attribut data- * avec thymeleaf

125

Puis-je définir l'attribut data- * avec thymeleaf?

Comme je l'ai compris à partir de la documentation thymeleaf, j'ai essayé:

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

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
html thymeleaf Alexandru Severin
la source
7
C'était un bogue, corrigé pour Thymeleaf 3.0 . Cette question n'est pertinente que pour la version antérieure à 3.0. Pour les plus récents, th:data-el_idcela fonctionnera.
GabiM

Réponses:

219

Oui, th:attrà la rescousse de la documentation Thymeleaf - Définition des valeurs d'attribut .

Pour votre scénario, cela devrait faire le travail:

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

Les règles XML ne vous permettent pas de définir deux fois un attribut dans une balise, vous ne pouvez donc pas en avoir plus d'un th:attrdans le même élément.

Remarque: si vous voulez plus d'un attribut, séparez les différents attributs par une virgule: 

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}">
Aldrian
la source
54
Juste une note pour les futurs lecteurs, vous ne pouvez pas avoir plus d'un th: attr dans le même élément, alors utilisez-en un et séparez les différents attributs par une virgule:th:attr="data-id=${element.getId()},data-name=${element.getName()}"
AntonioOtero
5
Si vous avez besoin d'inclure une variable dans une chaîne, vous devez le faire:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"
kabadisha
1
Le commentaire de @AntonioOtero devrait faire partie de la réponse.
Don Cheadle
Je souhaite que le traitement des attributs ne soit pas limité à certains attributs mais plutôt généralement géré. Quelqu'un at-il entendu dire que ce sera une vedette? (Eh bien blâmez-moi, je n'ai pas encore vérifié la version 3 ;-)
Dirk Schumacher
7

Avec Thymeleaf 3.0, il y a le processeur d'attributs par défaut qui peut être utilisé pour n'importe quel type d'attributs personnalisés, par exemple th:data-el_id=""devient data-el_id="", th:ng-app=""devient ng-app=""et ainsi de suite. Il n'y a plus besoin du dialecte des attributs de données bien-aimé.

Cette solution que je préfère, si je veux utiliser json comme valeur, au lieu de:

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

Vous pouvez utiliser (en combinaison avec une substitution littérale ):

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

Mise à jour: Si vous n'aimez pas l' thespace de noms, vous pouvez également utiliser des noms d'attributs et d'éléments conviviaux HTML5 comme data-th-data-foobar="".

Si quelqu'un est intéressé, les tests de moteur de modèles associés peuvent être trouvés ici: Tests pour le processeur d'attributs par défaut

RiZKiT
la source