带引号的Thymeleaf内联javascript不起作用

Question

我有一个使用Thymeleaf的Spring启动应用程序。我正在使用字符串值设置一个模型变量，并希望在javascript中将其用作变量值。

在Java中，我执行以下操作：

StringBuffer data = new StringBuffer();
data.append("[ [\"").append(name1).append("\" ], \"").append(name2).append("\"] ] ");
...
model.addAttribute("dataString", data);

我的HTML代码如下所示：

<script th:inline="javascript">
  /*<![CDATA[*/
  var dataSet = [[${dataString}]];
  /*]]>*/
...
</script>

JavaScript中的结果应该是：

var dataSet = [ ["Name1"], ["Name2"] ];

但是我得到的是超文本标记语言：

var dataSet = "[ [\"Name1\"], [\"Name2\"] ]";

我在超文本标记语言/JavaScript中尝试了不同的东西：

• 仅使用一个括号[$dataString]-

JavaScript中没有正确的字符串。我怎样才能获得正确的字符串？

Answer 1

您不应该将JSON字符串从控制器传递到模型。相反，您应该传递常规Java对象，并让Thymeleaf为您进行编码。例如，如果您想要一个如下所示的数据集：

[ ["Name1"], ["Name2"] ]

然后，应将其添加到模型中，如下所示：

// This is an array of arrays, just like [ ["Name1"], ["Name2"] ]
String[][] dataset = {{"Name1"}, {"Name2"}};
model.addAttribute("dataString", dataset);

然后的输出

<script th:inline="javascript">
  /*<![CDATA[*/
  var dataSet = [[${dataString}]];
  /*]]>*/
</script>

将导致JavaScript：

var dataSet = [ ["Name1"], ["Name2"] ];

正如您所希望的，无需手动创建字符串。这当然适用于所有类型的Java对象，甚至可以将getter和setter自动转换为常规JavaScript对象。

当然，如果您真的只想直接从您的模型中添加JSON字符串，您当然可以使用未转义的内联。

var dataSet = [(${dataString})];

但这确实与这些东西的工作原理背道而驰。