变量表达式为javascript而不使用：inline

Question

我首先搜索了但是我找到了令人困惑的答案，因为我是Thymeleaf的新手，最好是javascript的业余爱好者。

我只想知道如何将变量表达式传递给javascript函数，就像在JSP中一样：

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

当然，这与Thymeleaf失败并传递字符串$ {contact.id}而不是其值，所以我怎样才能得到变量表达式的值呢？

我想要这种方式的原因是因为它取决于th:each迭代的行。

如果除了使用th:inline之外没有别的办法，那么考虑上述陈述的最佳方法是什么？

Answer 1

这个有用：

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

感谢百万富翁论坛： http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html

Answer 2

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

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

Answer 3

您无法将javascript个变量放入onclick或其他DOM属性中。 onclick或任何其他DOM属性的值应为常量字符串。

但是，您可以从javascript动态修改onclick属性的值，如下所示：

yourDomElement.onclick = anyVariable;

Answer 4

您可以这样做：

th：onclick =“'javascript：getContactId（\''+ $ {contact.id} +'\'）;'”

Answer 5

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

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

所有浏览器都会忽略任何名称以数据开头的属性。因此它不会影响用户界面，您可以轻松地在javascript中读取值。

我更喜欢这个，因为将javascript代码放在html中是不理想的（see unobtrusive javascript）

Answer 6

我在Twitter上问过Thymeleaf项目，他们的答案是：

您可以同时使用“ +”运算符或文字替换。例如：ModuleNotFoundError: No module named 'tensorflow'

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

我已经尝试过了，而且可行〜