JavaScript, Thymeleaf и локализующий текст

Question

Наша веб-страница построена с использованием большого количества JavaScript. У меня проблемы с заменой текста в сгенерированной разметке локализованным текстом. JavaScript не является встроенным в веб-страницу, но вводится с директивой. В JavaScript есть что-то вроде следующего:

$("#Dynamic-Modal-Content").empty();     
$("#Dynamic-Modal-Content").append("<div class='dynamic_model' id='dynamic_id'>"+
    "<p>Done?</p></div>");

На веб-странице есть

<div id="Dynamic-Modal-Content"></div>

Мне нужно заменить "Готово?" с локализованным текстом, но не могу понять, как. Я попробовал предложение на http://blog.florentlim.com/how-to-write-javascript-including-thymeleaf/, но это не сработало.

Это упрощенная версия реального кода, но суть проблемы.

Какие-нибудь указатели от людей в большом, широком мире?

Answer 1

Есть 2 обходных пути для этого:

• Вы можете использовать дополнительные js-файлы с текстами для каждой локали и выбрать нужный с javascript по запросу. Некоторые библиотеки виджетов пользовательского интерфейса используют этот подход в некоторой степени. Однако у него есть два основных недостатка. Javascript afaik может разрешать локаль только из браузера, поэтому вам все еще нужен некоторый параметр связи, передаваемый серверу, если вы сохраняете предпочтение локали в сеансе. Во-вторых, что еще более важно, вы не можете не разделять тексты i18n в разных местах для каждой локали - один для серверной части и один для js.

• Используйте атрибуты данных html5. Я считаю, что использование атрибутов данных html5 - это самый чистый способ передачи данных между сервером и js, не только для i18n.

Например, ваш div становится:

<div id="Dynamic-Modal-Content" th:attr="data-txt=#{label.done}"></div>

затем с помощью jQuery вы можете легко получить все атрибуты данных html5, как если бы они были данными jQuery:

$("#Dynamic-Modal-Content").data("txt");