使用 Thymeleaf 从 Spring 模型设置 JavaScript 变量答案

【问题标题】：Setting up a JavaScript variable from Spring model by using Thymeleaf使用 Thymeleaf 从 Spring 模型设置 JavaScript 变量
【发布时间】：2014-10-30 12:31:09
【问题描述】：

我使用 Thymeleaf 作为模板引擎。如何将变量从 Spring 模型传递给 JavaScript 变量？

弹簧侧：

@RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
    model.addAttribute("message", "hello");
    return "index";
}

客户端：

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>

【问题讨论】：

标签： javascript spring thymeleaf

【解决方案1】：

据官方documentation：

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[[${message}]]*/ 'default';
    console.log(message);

/*]]>*/
</script>

【讨论】：

不起作用... javascript error 未捕获的语法错误
工作正常，也可以从messages.properties中读取：var msg = [[#{msg}]];
@szxnyc 如果你忘记了/*<![CDATA[*/ 宏，你会得到它。
另请关注<script th:inline="javascript">
@MichałStochmal 您可以在外部 javascript 之上加载内联 javascript，并在外部 javascript 中使用相同的变量（在内联 javascript 中定义）。

【解决方案2】：

Thymeleaf 3 现在：

显示一个常量：
显示一个变量：
var message = [[${message}]];
或者在您以静态方式打开模板文件（不在服务器上执行）时，在注释中获得有效的 JavaScript 代码。

Thymeleaf 称之为：JavaScript 自然模板
var message = /*[[${message}]]*/ "";
Thymeleaf 将忽略我们在评论之后和分号之前写的所有内容。

【讨论】：

谢谢！想给你一杯啤酒我正在寻找这种语法 var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ "";

【解决方案3】：

var message =/*[[${message}]]*/ 'defaultanyvalue';

【讨论】：

注意 /* */ 和包含的 [[ ]] 之间应该没有空格。
值得注意的是，defaultanyvalue 只会在静态运行页面时使用，即在 Web 容器之外。如果在容器内运行并且变量 message 尚未声明，则生成的源代码将为 var message = null;
将th:inline="javascript" 添加到脚本标签也很重要。

【解决方案4】：

根据to the documentation，有几种方法可以进行内联。
正确的方式你必须根据情况选择。

1) 简单地将变量从服务器放到 javascript 中：

<script th:inline="javascript">
/*<![CDATA[*/

var message = [[${message}]];
alert(message);

/*]]>*/
</script>

2) 将 javascript 变量与服务器端变量相结合，例如您需要在 javascript 中创建请求链接：

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

我无法解决的一种情况 - 然后我需要在模板内调用的 Java 方法中传递 javascript 变量（我猜这是不可能的）。

【讨论】：

【解决方案5】：

确保您的页面上已有 thymleaf

//Use this in java
@Controller
@RequestMapping("/showingTymleafTextInJavaScript")
public String thankYou(Model model){
 model.addAttribute("showTextFromJavaController","dummy text");
 return "showingTymleafTextInJavaScript";
}


//thymleaf page  javascript page
<script>
var showtext = "[[${showTextFromJavaController}]]";
console.log(showtext);
</script>

【讨论】：

【解决方案6】：

我在野外见过这种事情：

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />

【讨论】：

【解决方案7】：

如果你使用 Thymeleaf 3：

<script th:inline="javascript">
    var username = [[${session.user.name}]];
</script>

【讨论】：

这应该得到更多的选票，现在 Thymeleaf 3 几乎是常态，是吗？手动链接也应该更新。 thymeleaf.org/doc/tutorials/3.0/… ...我第一次将带有音频数据的 float[] 发送到网页。可以使用 Web Audio API 播放它！这个问题和这些答案对定位使用的 Javascript 内联有很大帮助。

【解决方案8】：

另一种方法是创建一个由 java 控制器返回的动态 javascript，就像在 thymeleaf 论坛中写的那样：http://forum.thymeleaf.org/Can-I-use-th-inline-for-a-separate-javascript-file-td4025766.html

解决此问题的一种方法是创建一个动态 javascript 文件，其中包含嵌入其中的 URL。以下是步骤（如果您使用的是 Spring MVC）

@RequestMapping(path = {"/dynamic.js"}, method = RequestMethod.GET, produces = "application/javascript")
@ResponseStatus(value = HttpStatus.OK)
@ResponseBody
public String dynamicJS(HttpServletRequest request) {

        return "Your javascript code....";

}

【讨论】：

【解决方案9】：

如果您需要不转义显示变量，请使用以下格式：

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[(${message})]*/ 'default';

/*]]>*/
</script>

注意包裹变量的[(括号。

【讨论】：