不使用 th:inline 将变量表达式转换为 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14365746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Variable expression into javascript without using th:inline
提问by Nimchip
I searched first but I found confusing answers since I'm new to Thymeleaf and amateurish at best at javascript.
我首先进行了搜索，但我发现了令人困惑的答案，因为我是 Thymeleaf 的新手，并且充其量是 javascript 的业余爱好者。
I just want to know how to pass variable expressions into javascript functions, sort of like in JSP:
我只想知道如何将变量表达式传递给 javascript 函数，有点像在 JSP 中：
<a href="#" onclick="javascript:getContactId('${contact.id}');">Button</a>
Of course, this fails with Thymeleaf and passes the string ${contact.id} instead of its value, so how could I get the value of the variable expression instead?
当然，这与 Thymeleaf 失败并传递字符串 ${contact.id} 而不是它的值，那么我怎么能得到变量表达式的值呢？
The reason I want it this way is because it depends on the row which is being iterated by th:each.
我想要这种方式的原因是因为它取决于正在迭代的行th:each。
If there's no other way except to use th:inline, then what's the best approach considering the above statement?
如果除了使用之外别无他法th:inline，那么考虑到上述语句的最佳方法是什么？
回答by Nimchip
This one worked:
这个有效：
th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"
Thanks goes out to the thymeleaf forum: http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html
感谢 thymeleaf 论坛：http: //forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html
回答by David V
In Thymeleaf version 2.1, I have not been able to get the accepted answer to work. I did find some guidance from a Twitter post from Thymeleaf. Rather than using th:onclick, you use th:attrand specify the onclick attribute therein.
在 Thymeleaf 2.1 版中，我无法获得公认的工作答案。我确实从 Thymeleaf的Twitter 帖子中找到了一些指导。不是使用th:onclick，而是th:attr在其中使用并指定 onclick 属性。
th:attr="onclick='javascript:getContactId(\'' + ${contact.id} + '\');'"
回答by GabiM
A more generic approach, if you need in JS something that isn't passed as a event handler parameter:
一种更通用的方法，如果您需要在 JS 中不作为事件处理程序参数传递的内容：
th:attr="data-myValueFromThymeleaf=${contact.id}"
th:attr="data-myValueFromThymeleaf=${contact.id}"
Any attribute whose name is starting with data- is ignored by all browsers. So it won't affect the UI and you can easily read the value in javascript.
所有浏览器都会忽略名称以 data- 开头的任何属性。所以它不会影响用户界面，你可以很容易地读取 javascript 中的值。
I prefer this because it's not ideal to put javascript code in html (see unobtrusive javascript)
我更喜欢这个，因为将 javascript 代码放在 html 中并不理想（请参阅 unobtrusive javascript）
回答by Jason Wong
I have asked the Thymeleaf project on twitter, and their answer is:
我在 twitter 上问过 Thymeleaf 项目，他们的回答是：
You can use both the "+" operator or literal substitutions. For example: <a th:href="|javascript:change('start','${taskId}')|">
您可以使用“+”运算符或文字替换。例如：<a th:href="|javascript:change('start','${taskId}')|">
For more info: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html
更多信息：https: //www.thymeleaf.org/doc/articles/standarddialect5minutes.html
I have tried, and it works~
我试过了，有效~
回答by Archer
You can not put javascriptvariables into onclickor other DOM attributes. The value of onclickor any other DOM attribute should be a constant string.
您不能将javascript变量放入onclick或其他 DOM 属性中。onclick或任何其他 DOM 属性的值应该是一个常量字符串。
However, you can dynamically modify value of onclick attribute from javascript, like this:
但是，您可以从 javascript 动态修改 onclick 属性的值，如下所示：
yourDomElement.onclick = anyVariable;
回答by user3029929
You can do this like:
你可以这样做：
th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"
th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"
