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

Question

如何从__CODE__模型中读取模型变量并将其设置为Javascript？

请注意,我正在使用__CODE__模板引擎.

春方:

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

Answer 1

根据官方文件:

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

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

/*]]>*/
</script>

Answer 2

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

Answer 3

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会忽略我们在评论之后和分号之前写的所有内容.

更多信息:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

Answer 4

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

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变量(我猜不可能).

Answer 5

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

Answer 6

如果您使用 Thymeleaf 3：

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

Answer 7

我在野外看到过这种事情：

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