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

【问题标题】：Variable expression into javascript without using th:inline在不使用 th:inline 的情况下将变量表达式转换为 javascript
【发布时间】：2012-12-31 04:55:12
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript thymeleaf

【解决方案1】：

这个成功了：

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

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

【讨论】：

这对我有用，只有一个参数，但我（还）看不到两个参数的样子？
啊，没关系，明白了！对于（例如）一个固定的字符串参数，上面将是th:onclick="'javascript:getContactId(\'someString\',\'' + ${contact.id} + '\');'" Cool，谢谢！

【解决方案2】：

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

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

【讨论】：

谢谢谢谢谢谢！这是唯一对我有用的东西。不得不在一条神秘的推文中找到答案，这有点烦人！ :-)

【解决方案3】：

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

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

yourDomElement.onclick = anyVariable;

【讨论】：

什么意思？这将是标记的一部分。
标签的部分应该是一个常量字符串。您可以动态地从中执行此操作
你的意思是我不应该吗？因为这在过去对我有用。
我正在按名称调用外部函数，但整个函数都不存在。无论如何，这不是我的问题的一部分..
再一次，在元素内传递给 onclick 的值应该是一个常量字符串。你不能在那里传递 javascript 变量。为此，您应该从 javascript 设置 yourDomElement.onclick 的值。

【解决方案4】：

你可以这样做：

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

【讨论】：

【解决方案5】：

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

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

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

我更喜欢这个，因为将 javascript 代码放在 html 中并不理想 (see unobtrusive javascript)

【讨论】：

【解决方案6】：

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

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

我试过了，效果很好~

【讨论】：