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模板引擎计算过程无关了。
最新文章
- 基于Netty打造RPC服务器设计经验谈
- GLUT的简洁OO封装
- SQL指定字段指定顺序排序
- input框只允许输入数字 --------20160705
- windows server 无人值守安装
- Sharepoint2013:日期控件报错
- vsftpd 配置详解
- 【iHMI43 4.3寸液晶模块】demo例程(版本1.02)发布
- nginx 域名rewrite跳转
- KMP快速模式匹配的java实现
- [LeetCode]N-Queens 八皇后问题扩展(经典深层搜索)
- 打包zip下载
- 厉害了,龙果!开源中国颁发了证书:GVP-码云最有价值开源项目
- Python里面 search0和 match0的区别?
- [ICPC 北京 2017 J题]HihoCoder 1636 Pangu and Stones
- ANT入门&;用ANT编译java项目
- wamp3.1.0 X64下载链接
- 使用API函数EnumWindows()枚举顶层窗口
- 关闭IE 对剪切板访问的提示
- ubuntu命令行编译opencv c++项目
热门文章
- Flutter Window环境运行(VSCode + 单独运行Android 虚拟机)
- laravel 自带消息notification通知
- python-Web-flask-数据库
- 简单实现react中虚拟DOM渲染
- CF1183E/H Subsequences
- Matlab JPEG详细介绍
- 最新 昆仑万维java校招面经 (含整理过的面试题大全)
- Guava源码阅读-base-Enums
- Sumitomo Mitsui Trust Bank Programming Contest 2019 Task F. Interval Running
- 题目15 链表中倒数第K个节点