Thymeleaf 标签内,js中使用表达式

在文本中使用表达式

当然,我们同样可以在标签内赋值。

<p>Hello, [[${session.user.name}]]!</p>
  •  

效果和下面一样:

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
  •  

[[…]]之间的内容可以被赋值。为了使其生效,必须在此标签或者任何父标签上有th:inline属性。此属性有三种值(text , javascript and none)。text属性的用法:

<p th:inline="text">Hello, [[${session.user.name}]]!</p>
  •  

也可以在父标签上有此属性:

<body th:inline="text">
...
    <p>Hello, [[${session.user.name}]]!</p>
...
</body>

在javaScript中使用表达式

给js变量赋值

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

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = /*[[${session.user.name}]]*/ 'Sebastian';
    ...
/*]]>*/
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

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

    所以执行的结果如下:

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = 'John Apricot';
    ...
/*]]>*/
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

你也可以不用注释:

<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(){
...

转载于:https://my.oschina.net/u/2338224/blog/1609384

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值