如何将代码 thymeleaf 放在外部 javascript 文件中？
[英]How to put code thymeleaf in an external javascript file?
问题描述
I have an external javascript file which is declared in my html file with the following tag:
我有一个外部 javascript 文件，它在我的 html 文件中使用以下标签声明：
<script type="text/javascript" th:inline="javascript" th:src="@{/js/gp-aprobarDocumento.js}"></script>
and in gp-aprobarDocumento.js the code shown below:在gp-aprobarDocumento.js ，代码如下所示：
ventanaAprobacion = function(td)
{
/*<![CDATA[*/
idEntregable = $(td).attr("data-row-id");
idVersion = $(td).attr("data-row-version");
alert("la siguiente viene con el texto dle properties");
alert(/*[[${link.menu.page-certificacion-qa-bandeja-entrada}]]*/);
$(function() {
$("#dialog-aprobar-documento").dialog("open");
});
/*]]>*/
}
Thus when executed the function the window alert is shown empty.因此，当执行该功能时，窗口警报显示为空。
Does somebody know how to put thymeleaf expression in a external javascript?有人知道如何将 thymeleaf 表达式放入外部 javascript 中吗？
4 个解决方案
解决方案1
10 2014-11-30 14:35:35
I think what you want to do it's not possible, I have a similar question (here: How do you access a model attribute with javascript variable )我认为你想做什么是不可能的，我有一个类似的问题（这里： 你如何使用 javascript 变量访问模型属性）
but in your case you can do something like the this:但在您的情况下，您可以执行以下操作：
in html:在 html 中：
<script type="text/javascript" th:inline="javascript" >
var alertVariable = ${link.menu.page-certificacion-qa-bandeja-entrada};
</script>
and in the javascript the following:并在 javascript 中：
ventanaAprobacion = function(td)
{
...
alert(alertVariable);
...
}
I know that's not really what you want but I have the same problem and I don't think there is any solution.我知道这不是你真正想要的，但我有同样的问题，我认为没有任何解决方案。
解决方案2
2 2019-01-30 19:26:07
Via DOM:通过 DOM：
https://datatables.net/examples/data_sources/js_array.html https://datatables.net/examples/data_sources/js_array.html
If you're looking to create a JS variable from a Thymeleaf object you can add said object to the DOM.如果您想从 Thymeleaf 对象创建一个 JS 变量，您可以将所述对象添加到 DOM。 I recently did a project where I returned query results to a Java object of type List<> and added that object to the DOM through my Spring Controller.我最近做了一个项目，我将查询结果返回到 List<> 类型的 Java 对象，并通过我的 Spring Controller 将该对象添加到 DOM。
//Deliver Results Array to the DOM
model.addAttribute("myResult", myResult);
After this object is added to your Thymleaf template model you can access it in your HTML as将此对象添加到您的 Thymleaf 模板模型后，您可以在 HTML 中访问它
th:text="${myResult}"
You can also reference it in your Javascript by simply referencing the name of the model object from the DOM.您还可以通过简单地从 DOM 中引用模型对象的名称，在您的 Javascript 中引用它。 I haven't been able to get the variable to populate in the seperate JS file without making it global in scope from the HTML file with:我无法让变量填充到单独的 JS 文件中，而没有使其在 HTML 文件中的全局范围内使用：
<script th:inline="javascript">
var myResult = [[${myResult}]];
</script>
My JS file looks like this我的 JS 文件看起来像这样
$(function(){
//Get Thymeleaf DOM Object
console.log(myResult);
});
Returning Result from DOM从 DOM 返回结果
Th object in question must be reference-able from within the DOM.所讨论的对象必须是可从 DOM 中引用的。 You may have better performance with AJAX and creating a controller that returns the data to the client over HTTP.使用 AJAX 和创建通过 HTTP 将数据返回给客户端的控制器可能会获得更好的性能。 Seems like thymeleaf 3 has other solutions as well : https://github.com/thymeleaf/thymeleaf/issues/395似乎 thymeleaf 3 也有其他解决方案： https : //github.com/thymeleaf/thymeleaf/issues/395
Hope this helps!希望这可以帮助！
解决方案3
2 2019-12-24 09:30:01
This worked for me.这对我有用。 In my index.html :在我的index.html ：
<script th:inline="javascript">
/* variable used by index.js */
var referenceId = [[${referenceId}]];
</script>
<script type="text/javascript" th:src="@{/js/index.js}">
</script>
then in my index.js :然后在我的index.js ：
function doSomething() {
$.ajax({
type: 'GET',
url: '/api/' + referenceId ,
contentType: 'application/json',
beforeSend: beforeSend
})
}
Hope this helps.希望这可以帮助。
解决方案4
1 2021-05-18 10:47:53
Sure you can.你当然可以。
You can't put Thymeleaf template code in an external JavaScript file, but you can put JavaScript code in a pair of <script> tags in a html template, using a template fragment in the HTML.您不能将 Thymeleaf 模板代码放在外部 JavaScript 文件中，但可以使用 HTML 中的模板片段将 JavaScript 代码放在 html 模板中的一对 <script> 标签中。
Create a new HTML file 'gp-aprobarDocumento.html' in the /template folder, put your function in the script and replace /**/ with " .在/template文件夹中创建一个新的 HTML 文件 'gp-aprobarDocumento.html'，将您的函数放在脚本中并将/**/替换为" 。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<script th:fragment="gp-aprobarDocumento">
ventanaAprobacion = function(td)
{
idEntregable = $(td).attr("data-row-id");
idVersion = $(td).attr("data-row-version");
alert("la siguiente viene con el texto dle properties");
alert("[[${link.menu.page-certificacion-qa-bandeja-entrada}]]");
$(function() {
$("#dialog-aprobar-documento").dialog("open");
});
}
</script>
</head>
<body>
</body>
</html>
And add a th:replace <script> tag in your html file.并在您的 html 文件中添加一个th:replace <script> 标签。
<script th:replace="gp-aprobarDocumento :: gp-aprobarDocumento"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.