Solucionado
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
É 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