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

Question

我有一个使用 Thymeleaf 的 Spring Boot 应用程序。我正在使用字符串值设置模型变量，并希望将其用作 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"] ];

但我得到的是 HTML：

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

我在 HTML/JavaScript 中尝试了不同的东西：

• 只使用一个括号[$dataString] -> 得到var dataSet = [${dataString}];；
• 使用这个：/*[$dataString]*/ -> 得到var dataSet = /*[${dataString}]*/;；
• 或：/*[[$dataString]]*/ -> 结果为 var dataSet = "[ [\"Name1\"], [\"Name2\"] ]";
• 删除CDATA的东西->没有改变

在 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})];

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