tymeleaf教程标签内，js中使用表达式

2021-03-12886 次阅读约 1 分钟读完

表达式同样可以在javascript中使用。先用属性声明一下：javascript ( th:inline=”javascript” )，然后我们开始在js中声明变量：

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

/[[…]]/表达式的理解如下：

/…/中的内容在用浏览器打开静态网页时，会被忽略. ‘Sebastian’会在浏览器中显示。静态时。 Thymeleaf解析时，会解析/[[…]]/的内容，并把获得的值替换掉/[[…]]/后面的内容。

所以执行的结果如下：

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = 'John Apricot';
    ...
/*]]>*/
</script>

你也可以不用注释：

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

这会让它在静态显示时出现错误。注意：引擎求值后注入是智能的，它可以智能赋值一下类型的数据。

Strings Numbers Booleans Arrays Collections Maps Beans (objects with getter and setter methods) 举个栗子：

script th:inline="javascript">
/*<![CDATA[*/
...
var user = /*[[${session.user}]]*/ null;
...
/*]]>*/
</script>

${session.user}会获取一个user对象。写入后如下：

<script th:inline="javascript">
/*<![CDATA[*/
...
var user = {'age':null,'firstName':'John','lastName':'Apricot',
'name':'John Apricot','nationality':'Antarctica'};
...
/*]]>*/
</script>

引擎同样允许增加和删除代码块，增加代码块：

var x = 23;
/*[+
var msg = 'This is a working application';
+]*/
var f = function() {
...

解析如下：

var x = 23;
var msg = 'This is a working application';
var f = function() {
...

删除代码块：

var x = 23;
/*[- */
var msg = 'This is a non-working template';
/* -]*/
var f = function(){
...

解析如下：

var x = 23;
var f = function(){
...