web-dev-qa-db-fra.com

en utilisant data- * attribut avec thymeleaf

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

D'après ce que j'ai compris 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 -->
htmlthymeleaf
98
Alexandru Severin

Oui, th:attr à la rescousse 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 un attribut deux fois dans une balise, vous ne pouvez donc pas avoir plus d'un th:attr dans le même élément. 

Remarque: Si vous souhaitez plusieurs attributs, séparez-les par une virgule: 

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

Ou vous pouvez utiliser ce dialecte Thymeleaf https://github.com/mxab/thymeleaf-extras-data-attribute et vous pourrez

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

Avec Thymeleaf 3.0, il existe un Processeur d’attributs par défaut qui peut être utilisé pour tout 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. Le dialecte d'attributs de données bien-aimé n'est plus nécessaire.

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 substitution littérale ): th-data-foobar='|{"foo":${bar}}|'

Si quelqu'un est intéressé, vous trouverez les tests de moteur de modèle associés ici: Tests du processeur d'attributs par défaut

0
RiZKiT