javascript - Thymeleaf:将文字与变量结合起来

Question

我在 Thymeleaf 中有这段代码:

<tr th:each="image: ${images}" >
    <img th:onmouseover="'javascript:imageName(\'theImageName\' + ${image.id} +'\');'"> 
</tr>

但是我遇到了解析错误

Answer 1

我有两个观察结果:

打开标签？

某些 Thymeleaf 模板模式要求模板格式良好。如果是这种情况，任何未关闭 img 标记都将导致解析错误。

发生这种情况时，java 堆栈跟踪会提供信息:

org.xml.sax.SAXParseException: The element type "img" must be terminated by the matching end-tag "</img>".

但您在浏览器中可能看到的错误不是:

Exception parsing document: template="home", line 19 - column 6

我的最低配置 Spring Boot 应用程序默认为这些更严格的模式之一(HTML5？XML？)，因此 @Metroids' 和 @ErikMD 的答案都给了我一个解析错误，但如果我关闭图像标签，两者都会起作用。

如果您不是这种情况，使用 java 堆栈跟踪更新问题可能会有所帮助。

管道

我认为所有这些撇号和加号使标记难以阅读(和书写)。使用literal substitutions with pipes可以说更清晰(并且更不容易出错):

<img th:onmouseover="|javascript:imageName('ImageName${image.id}');|" />

甚至:

<img th:onmouseover="|imageName('ImageName${image.id}')|" />

如果您不喜欢这种方法，也可以通过删除 theImageName 之后的反斜杠来修复问题中的代码:

<img th:onmouseover="'javascript:imageName(\'theImageName' + ${image.id} +'\');'" />