Question

我正在尝试在Thymeleaf模板中动态创建Javascript，以便使用Google Chart的时间轴软件包（请注意-该软件包在Google图书馆的春季版中不可用）。

我有一个Thymeleaf片段ganttchartvalue.html，其中包含以下代码，然后将其包含在实际页面中：

<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':['timeline']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Card' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([ /*[[${Parms}]]*/ ]);

    chart.draw(dataTable);
  }

/*]]>*/
</script>

在我的GanttController类中，我有以下代码：

String Parms =“ ['MegaCorp App 1'，新日期（2018，7，2），新日期（2019，4，9）]”; model.put（“ Parms”，Parms）;

（模型的类型为Map）。

这接近正常工作，但是生成的输出（最终页面源）为：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
/*<![CDATA[*/

  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Card' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([ "[ 'MegaCorp App 1', new Date(2018, 7, 2), new Date(2019, 4, 9) ]"]);

    chart.draw(dataTable);
  }

/*]]>*/
</script>

问题：

如何消除在dataTable.addRows方法调用中插入的文本前后的附加双引号（“），以便此代码正确运行？

谢谢

Answer 1

Thymeleaf并非设计用于这种方式。您不应该在模型中添加JSON字符串。相反，您应该做的是添加将以相同方式输出的java对象。就您而言：

model.put("parms", new Object[] {new String[] {"MegaCorp App 1", "2018-07-02", "2018-04-09"}});

然后在您的JavaScript中：

<script type="text/javascript" th:inline="javascript">
.
.
.
var rows = /*[[${parms}]]*/ null;
rows[0][1] = new Date(rows[0][1]);
rows[0][2] = new Date(rows[0][2]);
dataTable.addRows(rows);
.
.
.
</script>

使用Thymeleaf插入Javascript片段包括双引号

1 个答案: