Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

JQuery + Thymeleaf + Boas Práticas

Olá,

Estou fazendo um projetinho particular pra reforçar os conhecimentos do curso de JQuery e me deparei com o seguinte problema: É possível usar thymeleaf nos seus htmls e ainda assim conseguir separar o javascript do html ? Por exemplo, quero preencher um gráfico feito no javascript, usando thymeleaf no html, com informações do meu controlador(feito em java).

Obrigado

2 respostas
solução!

É possível sim César!

Como as informações vão vir prontos do back-end no html, seu código JavaScript vai precisar pegar essas infos para renderizar o gráfico no front-end.

Geralmente quando temos que armazenar dados no html pra pegar depois no JavaScript, fazemos isso usando atributos data-*. Vou dar um exemplo:

Lá no html pegamos um valor dinâmico grafico.valor:

<div class="grafico" data-valor="#{grafico.valor}">
</div>

No código JavaScript com jQuery, antes de renderizar o gráfico, acessamos o valor que armazenamos no atributo data-valor:

const $grafico = $('.grafico')
const valorDoHtml = $grafico.data('valor')

renderizaGrafico([valorDoHtml])

Os atributos data-* podem ter qualquer nome depois do data- e não há limite de quantos atributos data- você pode colocar no seu html.

Espero que isso resolva. O que achou?

Obrigado, Artur pela resposta. O código funcionou, porém sem o thymeleaf. No html usei exatamente assim: <... th:data-valor1=${4}>

e no javascript:

var $grafico = $('.grafico').data('valor')

renderizaGrafico([grafico])

Assim, ele n funciona... tentei dar um console log pra ver o que "era" a var gráfico e aparece assim: th:data-valor1 Apenas.

Vlw