如何在我的 javascript 文件中使用來自 message.properties 的 Thymeleaf 消息？

Question

很直接的問題。 我想知道是否有任何功能允許我從 message.properties 文件中獲取消息並將其插入到我的 javascript 文件中，就像使用 html 文件一樣。

例如，我的主頁上有一個標題，列為：

<h1 th:text="#{home.screen.title}"></h1>

home.screen.title = 主頁

在我的 javascript 文件中，我有一個 function 接受兩個字符串，我希望將它們作為這些 thymeleaf 消息。 所以，它有點像：

statusCode: {
       404: function() {
           PISAlert(th:text="#{encounter.error.notFound}", th:text="#{encounter.error.notFound.content}");
       }
   }

其中遇到.error.notFound.title = 遇到404錯誤。 並且未找到遇到.error.notFound.content = Object

Answer 1

我可以看到有兩種方法可以實現這一目標 - 但它們都對您問題的更廣泛背景做出了一些假設。 如果這些假設是錯誤的，那么這些方法可能不起作用。

選項 1 的 2

將 Thymeleaf 提供的參數從 Thymeleaf 模板傳遞給您的 function（位於單獨的 JS 文件中）。

這簡化了解決方案。 假設（與您的問題不同）是您僅在 Thymeleaf 模板中調用此 function - 因此您不需要將消息字符串直接呈現到 JS 代碼中（在其單獨的 JS 文件中）。

例子：

我使用以下消息文件 - jsdemo.properties：

demo.error1=Error message one
demo.error2=Error message two

這是我的示例中的 JS 文件 - js_demo.js：

function getErrorMessagesA(msg1, msg2) {
  console.log('parameter A1 = ' + msg1);
  console.log('parameter A2 = ' + msg2);
}

這是調用getErrorMessagesA的 Thymeleaf 模板：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>JS Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="js/js_demo.js"></script>
    </head>
    <body>
        <h2 id="derf">JS Demo</h2>
    </body>

    <!-- option 1: call the function in an external script with parameters: -->
    <script th:inline="javascript">
        $(document).ready(function() {
            getErrorMessagesA( [[#{welcome.error1}]], [[#{welcome.error2}]] );
        });
    </script>

</html>

Thymeleaf 模板使用[[#{...}]]語法將 Thymeleaf 變量嵌入到 JavaScript 中。 請參閱表達式內聯。

渲染 web 頁面時，控制台顯示如下兩條消息：

parameter A1 = Error message one
parameter A2 = Error message two

選項 2 的 2

這使用了一種不同的方法，其中 JS 作為片段添加到 HTML 模板中（意味着它可以在不同的模板中重復使用。在這種情況下，調用 function 時不帶參數。

片段使用這個嵌入到主模板中（它替換了上面代碼中的“選項 1”部分）：

    <!-- option 2: process the function as a Thymeleaf fragment: -->
    <th:block th:replace="jsdemo_jscode.html :: js_fragment_1" ></th:block>
    <script th:inline="javascript">
        $(document).ready(function() {
            getErrorMessagesB();
        });
    </script>

Thymeleaf 片段文件：

<th:block th:fragment="js_fragment_1">

    <script th:inline="javascript">
        function getErrorMessagesB() {
            console.log('parameter B1 = ' + /*[[#{demo.error1}]]*/ '[msg not found]');
            console.log('parameter B2 = ' + /*[[#{demo.error2}]]*/ '[msg not found]');
        }
    </script>

</th:block>

這使用了 Thymeleaf: /*[[#{demo.error1}]]*/的自然模板語法，以確保 JavaScript 有效。 還要注意th:inline="javascript"指令。

渲染 web 頁面時，控制台顯示如下兩條消息：

parameter B1 = Error message one
parameter B2 = Error message two

這里的主要區別在於片段中對 JS 的調用沒有參數 - 它只是getErrorMessagesB(); .

選項 3 的 2

理論上還有第三種選擇——但我從來沒有這樣做過。 我認為這會很復雜。

您可以在 Thymeleaf 模板中使用無參數調用getErrorMessagesB(); - 但不是使用選項 2 中的 JS 片段，而是使用選項 1 中的外部 JS 文件。

在這里，JS 將如下所示：

function getErrorMessagesB() {
    console.log('parameter B1 = ' + /*[[#{demo.error1}]]*/ '[msg not found]');
    console.log('parameter B2 = ' + /*[[#{demo.error2}]]*/ '[msg not found]');
}

這樣做的復雜性在於，除了 HTML 文件之外，您還需要處理該文件，但要單獨處理該文件，並使其可用於 HTML 文件。 我使用過文本模板，但從來沒有依賴於相關的 HTML 模板。

如何在我的 javascript 文件中使用來自 message.properties 的 Thymeleaf 消息？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-04-29 17:02:51

選項 1 的 2

選項 2 的 2

選項 3 的 2

如何在我的 javascript 文件中使用來自 message.properties 的 Thymeleaf 消息？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-04-29 17:02:51

選項 1 的 2

選項 2 的 2

選項 3 的 2

解決方案1
2 已采納 2020-04-29 17:02:51