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-includes-thymeleaf/#comment-7224上尝试了该建议，但这没有用。

这是真实代码的简化版本，但是具有要点。

在广阔的世界中，有没有人提出建议？

Answer 1

有两种解决方法：

• 您可以在每个语言环境的文本中使用其他js文件，并根据需要选择合适的javascript文件。 一些ui小部件库在某种程度上使用了这种方法。 但是，它有两个主要缺点。 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");