javascript - 在不使用 th:inline 的情况下将变量表达式转换为 javascript

Question

我首先进行了搜索，但我发现了令人困惑的答案，因为我是 Thymeleaf 的新手，并且充其量是 javascript 的业余爱好者。

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

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

当然，Thymeleaf 失败并传递字符串 ${contact.id} 而不是它的值，那么我怎么能得到变量表达式的值呢？

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

如果除了使用之外别无他th:inline法，那么考虑到上述陈述，最好的方法是什么？

score 29 · Accepted Answer

这个有效：

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

score 6 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

yourDomElement.onclick = anyVariable;

score 0 · Accepted Answer

0

你可以这样做：

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

于 2014-02-13T06:37:18.420 回答

score 0 · Accepted Answer

我在推特上问过 Thymeleaf 项目，他们的回答是：

您可以使用“+”运算符或文字替换。例如：<a th:href="|javascript:change('start','${taskId}')|">

我试过了，效果很好~

score 0 · Accepted Answer

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

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

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

我更喜欢这个，因为将 javascript 代码放在 html 中并不理想（请参阅 unobtrusive javascript）

6 回答 6