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

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

javascript jquery spring-boot

如何在我的javascript文件中使用message.properties中的Thymeleaf消息？,javascript,jquery,spring-boot,thymeleaf,Javascript,Jquery,Spring Boot,Thymeleaf,这个问题很简单。我想知道是否有任何功能允许我从message.properties文件中获取消息并将其插入javascript文件，就像使用html文件一样例如，我的主页上有一个标题，如下所示： <h1 th:text="#{home.screen.title}"></h1> Where containce.error.notFound.title=遇到404错误！和containce.error.notFound.content=Object not found有

这个问题很简单。我想知道是否有任何功能允许我从message.properties文件中获取消息并将其插入javascript文件，就像使用html文件一样

例如，我的主页上有一个标题，如下所示：

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

Where containce.error.notFound.title=遇到404错误！

和containce.error.notFound.content=Object not found

有两种方法可以实现这一点，但它们都对您问题的更广泛背景做出了一些假设。如果这些假设是错误的，那么这些方法可能行不通

第2项选择中的第1项将Thymeleaf提供的参数从Thymeleaf模板传递给函数（位于单独的JS文件中）

这简化了解决方案。假设（与您的问题不同）是您只从Thymeleaf模板中调用此函数，因此不需要将消息字符串直接呈现到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

的ThymileAF模板：

<!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>

方案2/2 这使用了一种不同的方法，其中JS作为片段添加到HTML模板中（这意味着它可以在不同的模板中重复使用。在这种情况下，调用函数时不带参数

使用以下代码将片段嵌入主模板中（替换上述代码中的“选项1”部分）：

这里的主要区别在于，在片段中对JS的调用没有参数——它只是

getErrorMessagesB（）；

第2项选择中的第3项理论上还有第三种选择——但我从来没有这样做过。我认为这会很复杂

您可以在Thymeleaf模板中使用无参数调用

getErrorMessagesB（）；

——但是您可以使用选项1中的外部JS文件，而不是选项2中的JS片段

在这里，JS将如下所示：

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

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

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

这项工作的复杂性在于，您需要在HTML文件之外（但与HTML文件分开），并使其可用于HTML文件。我使用过文本模板，但从来没有使用过依赖于相关HTML模板的地方。

哇，有很多有趣的东西要看。我想我可能需要将参数放入函数中所以我不会在大约50次不同的时间里复制同一个。所以我会从选项1开始，如果我想尝试创新，我会从选项3开始。谢谢你的帮助！

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

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

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