如何將代碼 thymeleaf 放在外部 javascript 文件中？

Question

我有一個外部 javascript 文件，它在我的 html 文件中使用以下標簽聲明：

<script type="text/javascript" th:inline="javascript" th:src="@{/js/gp-aprobarDocumento.js}"></script>

在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");
    });
  /*]]>*/
}

因此，當執行該功能時，窗口警報顯示為空。

有人知道如何將 thymeleaf 表達式放入外部 javascript 中嗎？

Answer 1

我認為你想做什么是不可能的，我有一個類似的問題（這里：你如何使用 javascript 變量訪問模型屬性）

但在您的情況下，您可以執行以下操作：

在 html 中：

<script type="text/javascript" th:inline="javascript" >
    var alertVariable = ${link.menu.page-certificacion-qa-bandeja-entrada};
</script>

並在 javascript 中：

ventanaAprobacion = function(td) 
{
    ...
    alert(alertVariable);
    ...
}

我知道這不是你真正想要的，但我有同樣的問題，我認為沒有任何解決方案。

Answer 2

通過 DOM：

https://datatables.net/examples/data_sources/js_array.html

如果您想從 Thymeleaf 對象創建一個 JS 變量，您可以將所述對象添加到 DOM。 我最近做了一個項目，我將查詢結果返回到 List<> 類型的 Java 對象，並通過我的 Spring Controller 將該對象添加到 DOM。

  //Deliver Results Array to the DOM
  model.addAttribute("myResult", myResult);

將此對象添加到您的 Thymleaf 模板模型后，您可以在 HTML 中訪問它

  th:text="${myResult}"

您還可以通過簡單地從 DOM 中引用模型對象的名稱，在您的 Javascript 中引用它。 我無法讓變量填充到單獨的 JS 文件中，而沒有使其在 HTML 文件中的全局范圍內使用：

<script th:inline="javascript">
    var myResult = [[${myResult}]];
</script>

我的 JS 文件看起來像這樣

  $(function(){

  //Get Thymeleaf DOM Object
  console.log(myResult);
  });

從 DOM 返回結果

所討論的對象必須是可從 DOM 中引用的。 使用 AJAX 和創建通過 HTTP 將數據返回給客戶端的控制器可能會獲得更好的性能。 似乎 thymeleaf 3 也有其他解決方案： https : //github.com/thymeleaf/thymeleaf/issues/395

希望這可以幫助！

Answer 3

這對我有用。 在我的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>

然后在我的index.js ：

function doSomething() {        
    $.ajax({
        type: 'GET',
        url: '/api/' + referenceId ,
        contentType: 'application/json',
        beforeSend: beforeSend
    })
}

希望這可以幫助。

Answer 4

你當然可以。

您不能將 Thymeleaf 模板代碼放在外部 JavaScript 文件中，但可以使用 HTML 中的模板片段將 JavaScript 代碼放在 html 模板中的一對 <script> 標簽中。

在/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>

並在您的 html 文件中添加一個th:replace <script> 標簽。

<script th:replace="gp-aprobarDocumento :: gp-aprobarDocumento"></script>

如何將代碼 thymeleaf 放在外部 javascript 文件中？

問題描述

4 個解決方案

解決方案1
10 2014-11-30 14:35:35

解決方案2
2 2019-01-30 19:26:07

解決方案3
2 2019-12-24 09:30:01

解決方案4
1 2021-05-18 10:47:53

如何將代碼 thymeleaf 放在外部 javascript 文件中？

問題描述

4 個解決方案

解決方案1 10 2014-11-30 14:35:35

解決方案2 2 2019-01-30 19:26:07

解決方案3 2 2019-12-24 09:30:01

解決方案4 1 2021-05-18 10:47:53

解決方案1
10 2014-11-30 14:35:35

解決方案2
2 2019-01-30 19:26:07

解決方案3
2 2019-12-24 09:30:01

解決方案4
1 2021-05-18 10:47:53