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

112

我正在使用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

— 马泰奥
source

191

根据官方文件：

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

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

/*]]>*/
</script>

— 腺病毒
source

1

无效... javascript错误未捕获的语法错误

— szxnyc

6

工作正常，也可以从messages.properties中读取：var msg = [[＃{msg}]];

— 安德烈（Andrey）2015年

2

@szxnyc如果您忘记了/*<![CDATA[*/宏，您将得到它。

— CodeMonkey '16

8

也要注意<script th:inline="javascript">

— Grigory Kislin '17

1

@MichałStochmal，您可以在外部javascript上加载嵌入式javascript，并在外部javascript中使用相同的变量（在嵌入式javascript中定义）。

— Alfaz Jikani

20

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

— 用户名
source

6

注意，它应该在/ * * /和所包含的[[]]之间没有空格。

— jyu

1

值得注意的是，defaultanyvalue仅在静态运行页面（即在Web容器外部）时才使用。如果容器和可变的冲了进去message尚未宣布所产生的源代码将是var message = null;

— 费利佩·莱昂

3

添加th:inline="javascript"到脚本标签也很重要。

— redent84 '18

15

Thymeleaf 3现在：

显示一个常量：

<script th：inline =“ javascript”>
var MY_URL = /*[[[${T(com.xyz.constants.Fruits).cheery}]]*/“”;
</ script>

显示一个变量：
```
var message = [[$$ message}]];
```
或在以静态方式打开模板文件（无需在服务器上执行）时，添加注释以获取有效的JavaScript代码。

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

— Redochka
source

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

— 昂昂

12

根据文档，有几种方法可以进行内联。
您必须根据情况选择正确的方法。

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变量（我猜这是不可能的）。

— Sanluck
source

9

确保页面上已经有胸腺

//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>

— Nitish Kanade
source

6

我已经看到这种事情在野外起作用：

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

— 本体
source