usando el atributo data- * con thymeleaf

125

¿Puedo establecer el atributo data- * con thymeleaf?

Como entendí de la documentación de thymeleaf intenté:

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

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

html thymeleaf

— Alexandru Severin
fuente

77

Este fue un error corregido para Thymeleaf 3.0 . Esta pregunta solo es relevante para la versión pre 3.0. Para los más nuevos th:data-el_idfuncionará.

— GabiM

219

Sí, th:attrpara rescatar la documentación de Thymeleaf: establecer valores de atributos .

Para su escenario, esto debería hacer el trabajo:

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

Las reglas XML no le permiten establecer un atributo dos veces en una etiqueta, por lo que no puede tener más de uno th:attren el mismo elemento.

Nota: Si desea más de un atributo, separe los diferentes atributos por coma:

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

— Aldrian
fuente

54

Solo una nota para futuros lectores, no puede tener más de un th: attr en el mismo elemento, así que solo use uno y separe los diferentes atributos por coma:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

55

Si necesita incluir una variable como parte de una cadena, debe hacer esto:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

El comentario de @AntonioOtero debería ser parte de la respuesta.

— Don Cheadle

Deseo que el procesamiento de atributos no se limite a ciertos atributos, sino que se maneje en general. ¿Alguien ha escuchado que será característica? (Bueno, la culpa es mía, todavía no revisé la versión 3 ;-)

— Dirk Schumacher

11

O puede usar este dialecto de Thymeleaf https://github.com/mxab/thymeleaf-extras-data-attribute y podrá hacerlo

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

— Adrian Ber
fuente

7

Con Thymeleaf 3.0 existe el Procesador de atributos por defecto que se puede usar para cualquier tipo de atributos personalizados, por ejemplo , se th:data-el_id=""convierte data-el_id="", th:ng-app=""se convierte , ng-app=""etc. Ya no es necesario el querido dialecto de atributo de datos.

Esta solución la prefiero, si quiero usar json como valor, en lugar de:

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

Puede usar (en combinación con la sustitución literal ):

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

Actualización: si no le gusta el thespacio de nombres, también puede usar atributos amigables HTML5 y nombres de elementos como data-th-data-foobar="".

Si alguien está interesado, las pruebas de motor de plantilla relacionadas se pueden encontrar aquí: Pruebas para el procesador de atributos predeterminado

— RiZKiT
fuente