Я вижу два способа добиться этого, но они оба делают некоторые предположения о более широком контексте вашего вопроса. Если эти предположения неверны, то эти подходы могут не работать.
Опция 1 из 2
Передать параметры, предоставленные Thymeleaf, в вашу функцию (которая находится в отдельном файле JS) из Шаблон Thymeleaf.
Это упрощает решение. Предположение (которое расходится с вашим вопросом) состоит в том, что вы вызываете эту функцию только из шаблонов 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
Опция 2 из 2
При этом используется другой подход, при котором 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();.
Вариант 3 из 2
Теоретически Первый вариант - но я никогда не делал этого. Я думаю, что это будет сложно.
Вы можете использовать вызов без параметров в шаблоне Thymeleaf getErrorMessagesB(); - но вместо использования фрагмента JS, как в варианте 2, вы используете внешний JS файл как в варианте 1.
Здесь JS будет выглядеть следующим образом:
function getErrorMessagesB() {
console.log('parameter B1 = ' + /*[[#{demo.error1}]]*/ '[msg not found]');
console.log('parameter B2 = ' + /*[[#{demo.error2}]]*/ '[msg not found]');
}
Сложность в том, что вам нужно обработать этот файл в дополнение к файлу HTML, но отдельно от него, и сделать его доступным для файла HTML. Я использовал текстовые шаблоны, но никогда там, где они зависели от связанных HTML шаблонов.