变量表达式转换成javascript，而不使用th:inline

Variable expression into javascript without using th:inline

本文关键字：th inline 转换 表达式 javascript 变量      更新时间：2023-09-26

我先搜索了一下，但是我发现了令人困惑的答案，因为我是Thymeleaf的新手，在javascript方面最多是业余的。

我只是想知道如何将变量表达式传递到javascript函数中，有点像JSP:

<a href="#" onclick="javascript:getContactId('${contact.id}');">Button</a>

当然，这在Thymeleaf中失败了，它传递字符串${contact。id}而不是它的值，那么我怎么才能得到变量表达式的值呢?

我想这样做的原因是因为它取决于th:each迭代的行。

如果除了使用th:inline没有其他方法，那么考虑到上面的陈述，什么是最好的方法?

这个有效:

th:onclick="'javascript:getContactId(''' + ${contact.id} + ''');'"

感谢百里香叶论坛:http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html

在thyymeleaf版本2.1中，我无法获得接受的答案来工作。我确实从Thymeleaf的Twitter帖子中找到了一些指导。而不是使用th:onclick，您使用th:attr并指定其中的onclick属性。

th:attr="onclick='javascript:getContactId(''' + ${contact.id} + ''');'"

不能将javascript变量放入onclick或其他DOM属性中。onclick或任何其他DOM属性的值应该是一个常量字符串。

但是，你可以从javascript中动态地修改onclick属性的值，像这样:

yourDomElement.onclick = anyVariable;

您可以这样做:

th:onclick="'javascript:getContactId(' " + ${contact。Id} + ''');'"

一个更通用的方法，如果你需要在JS中不作为事件处理程序参数传递的东西:

th:attr="data-myValueFromThymeleaf=${contact.id}"

任何名称以data-开头的属性都会被所有浏览器忽略。所以它不会影响UI，你可以很容易地在javascript中读取值。

我更喜欢这个，因为它不是理想的把javascript代码放在html(见不显眼的javascript)

我在twitter上问了Thymeleaf项目，他们的答案是:

既可以使用"+"操作符，也可以使用文字替换。例如:<a th:href="|javascript:change('start','${taskId}')|">

更多信息:https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

我试过了，效果不错~

相关文章：