Trabalhando com Atributos data-* no Thymeleaf: A Sintaxe Correta
Resposta Rápida
*Para adicionar atributos `data-** no Thymeleaf, você usath:attr`, que vincula dinamicamente os valores da seguinte forma:
<span th:attr="data-custom=${dataValue}">Texto</span>Para fazer alterações, utilize a variável dataValue.
Um Tag, Múltiplos Atributos data-*
O Thymeleaf permite que você especifique *vários atributos data- ao mesmo tempo**, listando-os separados por vírgulas em th:attr:
<div th:attr="data-id=${element.id},data-name=${element.name}"></div>Assim como ao pedir uma pizza com vários ingredientes, você pode especificar diferentes atributos usando uma única expressão! 🍕
HTML5 e Thymeleaf 3.0: Simplificando a Escrita de Atributos
Com a introdução do Thymeleaf 3.0, trabalhar com atributos se tornou significativamente mais elegante graças ao manipulador de atributos padrão. Isso elimina a necessidade de recorrer a dialetos adicionais ao trabalhar com HTML5 ou ao usar atributos data-*.
<div data-id="${element.id}" data-name="${element.name}"></div>A sintaxe moderna encanta com sua simplicidade e concisão, correspondendo totalmente à estrutura elegante do HTML5. É como a transição de cartas escritas à mão para mensagens instantâneas. 💬
Inserindo JSON Diretamente Usando Expressões Literais
O Thymeleaf pode até inserir diretamente valores JSON em atributos data-*, garantindo vinculação correta de dados e JSON válido:
<button th:attr="data-config=${'{' + '\\'url\\':\\'' + element.url + '\\'' + '}'}">Clique aqui</button>Isso é semelhante à sensação de um terno perfeitamente ajustado, feito sob medida para você! 🕴️
Visualização
Apresentar atributos data-* no código HTML pode ser comparado ao uso de tags únicas em publicações do Instagram:
📸 Captura do Thymeleaf: <div th:text="${tool.name}" data-tool-id="${tool.id}"></div>
O atributo data-tool-id também pode ser comparado a uma hashtag favorita que ajuda outros a encontrarem suas postagens no futuro.
Como era antes: 🧐 ...qual era o nome daquela cafeteria aconchegante?
Agora é: ☕🔍✅ ...Aí está, era a #MelhorCafeteriaDoMundo.
Atributos em HTML servem como hashtags para suas postagens, com os atributos data-* sendo suas hashtags únicas que tornam o conteúdo facilmente rastreável! 🌐
Padrões XML Ao Usar Thymeleaf
Embora o Thymeleaf gere HTML, ele segue os padrões XML. Algumas regras XML a serem lembradas:
- Evite repetir atributos dentro da mesma tag.
- Siga a sintaxe correta do Thymeleaf.
Considere esses princípios como regras de etiqueta durante uma viagem internacional. 🛄 Problemas de sintaxe podem causar atrasos!
Ampliando Funcionalidades com Dialetos do Thymeleaf
Se você sentir que os recursos básicos do Thymeleaf não são abrangentes o suficiente, existem dialetos que oferecem capacidades adicionais:
Abra no GitHub: thymeleaf-extras-data-attributeIsso é como descobrir uma passagem secreta em uma biblioteca antiga que complementa os recursos clássicos do Thymeleaf com novos aspectos de uso. 📚
Recursos Úteis
- Tutorial do Thymeleaf — Esta página da documentação do Thymeleaf ilustra como trabalhar com atributos
data-*com exemplos. - Cinco Minutos para Voar com o Dialeto Padrão do Thymeleaf — Um tutorial sobre atributos dinâmicos no Thymeleaf, incluindo
data-*. - Usando Atributos de Dados em Desenvolvimento Web (MDN) — Um guia sobre atributos
data-*, que fazem parte importante da caixa de ferramentas do HTML5. - Substituindo Valores de String de Array por Chaves de Array no Stack Overflow — Uma discussão dedicada ao uso de atributos
data-*no Thymeleaf no Stack Overflow. - [ATUALIZAÇÃO IMPORTANTE] Fragmentos de Expressão no Repositório Thymeleaf no GitHub — Uma discussão sobre métodos para lidar com atributos
data-*no Thymeleaf.