thymeleaf的内联th:inline(在javascript访问model中的数据)
thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据,或是想在javascript代码块里访问model中的数据,则要使用内联的方法。
比如,我们可以这样访问对象:
<p>Hello, [[${session.user.name}]]!</p>
以上代码可以取代下面的一般写法:
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf。即使用此语法的语句称为“内联”。使用内联的语句的确会更加简洁一些。
若是想在javascript代码块内直接地使用model的对象值,则必须通过内联来实现。代码如下:
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var max = /*[[${maxSumOfDateInYear}]]*/ 20;
alert(max);
/*]]>*/
</script>
其中第2、5行为基于XML的转义写法,第3行把内联访问的语句用注释引起来,且后面跟着一个空格20,是指若不存在此对象,则自动设置默认值为20。
注意以上的javascript内联写法是基于你需要“直接地”使用model对象值的场景。否则还有其它写法,比如简单地声明一个hidden input:
<input type="hidden" id="maxSumOfDateInYear" th:value="${maxSumOfDateInYear}"/>
<script type="text/javascript" th:inline="none">
var max = $("#maxSumOfDateInYear").val();
var data = [["2012-05-07", 6], ["2012-04-16", 4]];
alert(max);
alert(data);
</script>
以上第1行声明了一个hidden的maxSumOfDateInYear,然后第3行通过jQuery来间接访问。
注意,若在thymeleaf代码里存在第4行的二维数组字面量的写法,则必须要把javascript代码块设置为inline为none的,否则thymeleaf引擎会把此数组的[[也当成了内联语句处理,从而导致后端报错An error happened during template parsing。要么,你就还是通过hidden间接访问的方式实现。
或者,也可以通过ajax直接获取内容来实现。但这就属与thymeleaf模板引擎计算过程无关了。
thymeleaf的内联th:inline(在javascript访问model中的数据)的更多相关文章
- (转)内联(inline)函数与虚函数(virtual)的讨论
本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- (转载)内联函数inline和宏定义
(转载)http://blog.csdn.net/chdhust/article/details/8036233 内联函数inline和宏定义 内联函数的优越性: 一:inline定义的类的内联函 ...
- 内联函数 inline
(一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- 内联函数inline的用法
一.什么是内联函数 在C语言中,如果一些函数被频繁调用,不断地有函数入栈,即函数栈,会造成栈空间或栈内存的大量消耗.为了解决这个问题,特别的引入了inline修饰符,表示为内联函数. 栈空间就是指放 ...
- C++ 内联函数inline
http://blog.csdn.net/u011327981/article/details/50601800 1. 内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码 ...
- 【转】ios内联函数 inline
ios内联函数 inline 缘由 由于在学习使用UIScrollVew开发的过程中,碰到下面这个属性(设置内边距): @property(nonatomic) UIEdgeInsets scroll ...
- 07 c++中的内联函数inline
文章链接: 问题描述:类中成员函数缺省默认是内联的,如果在类定义时就在类内给出函数定义,那当然最好.如果在类中未给出成员函数定义,而又想内联该函数的话,那在类外要加上 inline,否则就认为不是内联 ...
随机推荐
- CRLF——http response 拆分攻击(webgoat)
0x01 什么是CRLF CRLF是“回车+换行”(\r和\n)/(%0d和%0a)的简称. CRLF利用: 正常输入的请求中加入恶意代码,控制HTTP响应header中的字符(Location,Se ...
- Vue.js 关于双向绑定的一些实现细节
Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...
- 通过js获取本机的IP地址
参考链接:https://blog.csdn.net/qq_39327418/article/details/90052668
- WCF中事务处理
一.引言 今天来介绍下WCF对事务的支持. 二.WCF事务详解 2.1 事务概念与属性 首先,大家在学习数据库的时候就已经接触到事务这个概念了.所谓事务,它是一个操作序列,这些操作要么都执行,要么都不 ...
- Linux 工作管理 (job control)
fg , bg 有时,命令需要很长的时间才能执行完成.对于这种情况,我们使用‘bg’命令可以将任务放在后台执行,而用‘fg’可以调到前台来使用. 我们可以通过‘&’在后台启动一个程序: fin ...
- Spring mybatis源码篇章-Mybatis的XML文件加载
通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-Mybatis主文件加载 前话 前文主要讲解了Mybatis的主文件加载方式,本文则分析不使用主文件加载方式 ...
- GrapeCity Documents (服务端文档API组件) V3.0 正式发布
近日,葡萄城GrapeCity Documents(服务端文档API组件)V3.0 正式发布! 该版本针对 Excel 文档.PDF 文档和 Word 文档的 API 全面更新,加入了用于生成 Exc ...
- SQL优化记录
2019.06.19记录: 1.SQL优化的原因: 原因:性能低,执行时间太长,等待时间太长,SQL语句欠佳(尤其连接查询),索引失效,服务器参数设置的不合理(如:缓冲区,线程等) a.SQL: 编写 ...
- PHP学习之PHP的语法糖
PHP的语法糖 计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用. 常见的PHP的语法糖 echo(),print(),die(),isset(),unset(),i ...
- Django-djangorestframework-响应模块
响应模块 一般都用 Response 对象来做返回(最后一定是打包成符合 HTTP 协议的数据格式来传输,Response 类做了一系列处理,所以这里我们只需要关注下它的那些参数即可) 响应类构造器 ...