如何在JavaScript代码中使用thymeleaf？

Question

我有一个JSP页面，里面有一段我写的JavaScript代码，运行良好。我需要用thymeleaf重新编写相同的代码，但不起作用。 JSP的JavaScript代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 

    google.charts.setOnLoadCallback(drawChartPie); 

    function drawChartPie() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Conta', 'Valor'],   
     <c:forEach items="${model.contaCorretora }" var="contaCorretora"> 
     ['${contaCorretora.tipoConta}', ${contaCorretora.valorAtual}], 
    </c:forEach> 
     ]); 

    var options = { 
     title: '${model.pessoa.nome }' 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
    } 

</script> 

我没有找到方法将此代码迁移到百里香。

更新1：

我使用的代码，你给我建议，但仍然不能正常工作：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">></script> 
<script type="text/javascript" th:inline="javascript"> 
/*<![CDATA[/ 
google.charts.load('current', {'packages':['corechart']}); 

    google.charts.setOnLoadCallback(drawChartPie); 

    var array = [[${investimento}]]; 

    function drawChartPie() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Conta', 'Valor'],   
     for (i in array) 
     { 
     ['array[i].tipoConta', array[i].valorTotalDolar],  
     } 
     ]); 

    var options = { 
     title: 'Teste' 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
    } 

    /]]>*/ 
</script> 

Answer 1

首先启用JavaScript内嵌在th:inline：

<script type="text/javascript" th:inline="javascript"> 

然后使用双括号表达式插入对象：

var options = { 
    title: [[${model.pessoa.nome}]]; 
}; 

相反的foreach，你应该使用的事实，Thymeleaf（与杰克逊库的帮助），可以将对象序列化到JSON：

var contaCorretora = [[${model.contaCorretora}]]; 
// "contaCorretora" is now a JavaScript object, 
// make an array out of it or what you want