Thymeleaf 语法在 javascript 文件中不起作用答案

【问题标题】：Thymeleaf syntax is not working in java script fileThymeleaf 语法在 javascript 文件中不起作用
【发布时间】：2021-03-13 08:32:51
【问题描述】：

我正在使用 Spring Boot 向 thymeleaf 提供数据。

var list = [(${listStudents})];

listStudents 是一个学生列表，借助它我可以在 HTML 中填充数据，该列表运行良好，但使用 thymeleaf 在 java 脚本中获取相同的列表在上面的行中显示错误：，预期的。

我已将 th:inline="javascript" 属性添加到 HTML 文件中的脚本标记为：

<script th:inline="javascript" src="home_script.js"></script>

从昨天开始尝试解决这个问题。提前致谢！

【问题讨论】：

【解决方案1】：

, expected 错误是var list = [(${listStudents})]; 的标准 JavaScript 语法错误。为了解决这个问题，Thymeleaf 支持将其内联表达式放置在 JavaScript cmets 中：

var list = /*[[${listStudents}]]*/ [];

因为 Thymeleaf 表达式在 JS 注释中，请注意我们必须如何提供默认（可见）JS 值，以防止 JavaScript 引发不同的语法错误。我使用了[]，因为你有一个列表。您可以使用'' 或null 或任何最合适的。假设你的 Thymeleaf 被正确渲染，这个额外的语法将被忽略。

但是，我认为这不会完全解决您的问题，除非您已经在应用程序中配置了 JavaScript 模板解析器。

你正在使用这个：

<script th:inline="javascript" src="home_script.js"></script>

首先，th:inline="javascript" 部分无效，因为您的 JavaScript 代码位于外部文件中：home_script.js（即它没有嵌入到您的 HTML 文件中）。

如果您希望 Thymeleaf 处理该单独 JS 文件中的 Thymeleaf 表达式，您必须告诉 Thymeleaf 显式处理外部 JavaScript 文件（就像它处理 HTML 文件一样）。

您可能只有一个 HTML 解析器 - 而且您的 JS 代码没有嵌入到您的 HTML 文件中 - 它是在它自己单独的 JS 文件中。请参阅this demo application，它显示了如何设置我认为您可能需要的内容。

或者，您可以简单地将 JS 直接嵌入到 HTML 文件的 <body> 中，而不要使用外部 JS 文件：

<body>

    <script th:inline="javascript">
        var list = /*[[${listStudents}]]*/ [];
    </script>

</body>

如果您仍然需要使用外部 JS 文件，您可以在 HTML 文件中分配所有 Thymeleaf 生成的变量（如上面的示例），然后将这些变量作为函数参数传递给 JS 文件中的各种 JavaScript 函数.

使用这种方法意味着您的 JS 文件不需要包含任何 Thymeleaf 表达式 - 它只是从您的 HTML 文件中的 JS 片段接收呈现的值。

【讨论】：

【解决方案2】：

你应该使用[[${listStudents})]]（所以2个方括号，不使用圆括号）

【讨论】：