Maz*_*aze 5 javascript jquery thymeleaf spring-boot
非常简单的问题。我想知道是否有任何功能可以让我从 message.properties 文件中获取消息并将其插入到我的 javascript 文件中，就像使用 html 文件一样。
例如，我的主页上有一个标题，如下所示：
<h1 th:text="#{home.screen.title}"></h1>
其中 home.screen.title = 主页
在我的 javascript 文件中，我有一个接受两个字符串的函数，我希望将它们作为百里香消息。所以，它有点像：
statusCode: {
404: function() {
PISAlert(th:text="#{encounter.error.notFound}", th:text="#{encounter.error.notFound.content}");
}
}
其中encounter.error.notFound.title = 遇到404错误！并且遇到.error.notFound.content = 未找到对象
我可以看到有两种方法可以实现这一目标 - 但它们都对您的问题的更广泛背景做出了一些假设。如果这些假设是错误的，那么这些方法可能行不通。
将 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);
}
这是 Thymeleaf 模板，它调用getErrorMessagesA：
<!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 中。请参阅表达式内联。
当网页渲染完成后，控制台会显示如下两条消息：
parameter A1 = Error message one
parameter A2 = Error message two
这使用了不同的方法，其中 JS 作为片段添加到 HTML 模板中（这意味着它可以在不同的模板中重复使用。在这种情况下，调用该函数时不带参数。
使用此片段将片段嵌入到主模板中（替换上面代码中的“选项 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"指令。
当网页渲染完成后，控制台会显示如下两条消息：
parameter B1 = Error message one
parameter B2 = Error message two
这里的主要区别是片段中对 JS 的调用没有参数 - 它只是getErrorMessagesB();.
理论上还有第三种选择——但我从未这样做过。我认为这会很复杂。
您可以在 Thymeleaf 模板中使用无参数调用getErrorMessagesB();- 但您可以像选项 1 那样使用外部 JS 文件，而不是像选项 2 那样使用 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 模板。
| 归档时间： |
|
| 查看次数： |
3510 次 |
| 最近记录： |