usando o atributo data- * com thymeleaf

125

Posso definir o atributo data- * com thymeleaf?

Como entendi na documentação do thymeleaf, tentei:

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

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

html thymeleaf

— Alexandru Severin
fonte

7

Este erro foi corrigido no Thymeleaf 3.0 . Esta pergunta é relevante apenas para a versão anterior à 3.0. Para os mais novos th:data-el_idvai funcionar.

— GabiM 12/0318

219

Sim, th:attrpara a documentação de resgate do Thymeleaf - Configurando valores de atributo .

Para o seu cenário, isso deve fazer o trabalho:

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

As regras XML não permitem definir um atributo duas vezes em uma tag; portanto, você não pode ter mais de um th:attrno mesmo elemento.

Nota: Se você desejar mais de um atributo, separe os diferentes atributos por vírgula:

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

— Aldrian
fonte

54

Apenas uma nota para futuros leitores, você não pode ter mais de um th: attr no mesmo elemento então é só usar um e separar os diferentes atributos por vírgula:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

5

Se você precisa incluir uma variável como parte de uma cadeia que você precisa fazer isso:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

O comentário de @AntonioOtero deve fazer parte da resposta.

— Don Cheadle

Desejo que o processamento de atributos não se restrinja a certos atributos, mas seja geralmente tratado. Alguém já ouviu falar que será recurso? (Bem culpa em mim, eu não verificar a versão 3 ainda ;-)

— Dirk Schumacher

11

Ou você pode usar este dialeto da Thymeleaf https://github.com/mxab/thymeleaf-extras-data-attribute e poderá fazer

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

— Adrian Ber
fonte

7

Com o Thymeleaf 3.0, existe o processador de atributos padrão, que pode ser usado para qualquer tipo de atributo personalizado, por exemplo , torna- th:data-el_id=""se data-el_id="", th:ng-app=""torna ng-app=""- se etc. Não há mais necessidade do dialeto de atributo de dados amado.

Esta solução eu prefiro, se eu quiser usar json como o valor, em vez de:

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

Você pode usar (em combinação com a substituição literal ):

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

Update: Se você não gosta do thnamespace, você também pode usar HTML5 atributo amigável e nomes de elementos como data-th-data-foobar="".

Se alguém estiver interessado, os testes relacionados ao mecanismo de modelo podem ser encontrados aqui: Testes para o Processador de Atributos Padrão

— RiZKiT
fonte