Thymeleaf 学习笔记 (5)
2019独角兽企业重金招聘Python工程师标准>>>
类似于 EL 表达式的行内变量在 js 文件中的使用
Thymeleaf 在 js中,可以动态的替换变量的值,支持将一个对象转为 json 对象赋予 js 的变量。同时完美支持静态模式显示和解析时替换变量值。
使用方式:在 script 标签上增加 th:inline="javascript"属性。
1、在 html 以外的其他文本文件中,使用双方括号(下面还有一个双括号里面套圆括号的形式)表达式,这种语法模式是开启的,不需要做任何设置。
[[${session.user.name}]] 格式的变量模板处理时会转译的内容,例如转译 html 标签或者是一些文本在字面量中需要转译的符号。 [(${session.user.name})] 格式的变量模板处理时不转译内容,直接将值贴到变量的位置上。
但是如果我们直接放到文件中的话可能就会在静态页面看的时候就会比较丑,对于html ,我们可以用一个 span来给一个静态模式下看起来舒服的内容。
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
ps:在 js 文件中,下面会讲到我们将会使用注释解决这个问题。
例子:
<script th:inline="javascript">...var username = [[${session.user.name}]];... </script>
结果:
<script th:inline="javascript">...var username = "Sebastian \\"Fruity\\" Applejuice";... </script>
上面的例子中,模板引擎做了两件重要的事情 ,首先不是直接输出了变量的内容,它还自动添加了双引号,让这个 js 最终的结果保证了语法上没有错误。其次,字符串中的双引号被自动的转译。
如果将双中括号改为一个中括号一个圆括号,那么将不会自动增加双引号和转译变量中的特殊字符。
为了保证在静态的浏览模式下可以正常查看,可以使用 js 的普通注释将变量注释起来,然后在注释外加入一个静态的值,例如下面这个样子:
<script th:inline="javascript">...var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";... </script>
2、js 中Thymeleaf 不仅能处理 String 类型的变量,而且同时也能处理其他常见类型:
- Strings
- Numbers
- Booleans
- Arrays
- Collections
- Maps
- Beans (objects with getter and setter methods)
例如我们放了一个对象给变量:
<script th:inline="javascript">...var user = /*[[${session.user}]]*/ null;... </script>
引擎处理后,将会产生一个 json 对象如下,嗯,底层使用的是 jackson 的库。
<script th:inline="javascript">...var user = {"age":null,"firstName":"John","lastName":"Apricot","name":"John Apricot","nationality":"Antarctica"};... </script>
下一篇介绍普通文本模式的模板中,如何使用 Thymeleaf 逻辑判断,敬请期待。
转载于:https://my.oschina.net/yangyan/blog/811726
Thymeleaf 学习笔记 (5)相关推荐
- thymeleaf 学习笔记
thymeleaf,我个人认为是个比较好的模板,性能也比一般的,比如freemaker的要高,而且把将美工和程序员能够结合起来,美工能够在浏览器中查看静态效果,程序员可以在应用服务器查看带数据的效果. ...
- thymeleaf 学习笔记-基础篇(中文教程)
转自: http://www.cnblogs.com/vinphy/p/4674247.html (一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.Fre ...
- Thymeleaf 学习笔记 (2)
2019独角兽企业重金招聘Python工程师标准>>> th-* 属性的优先级,数字越小的优先处理,属性在 dom 上的顺序不影响优先级: Order Feature Attribu ...
- Thymeleaf 学习笔记 (4)~~~~
2019独角兽企业重金招聘Python工程师标准>>> 模板布局 模板布局主要用到的标记有这么几个: th:fragment ,用来定义片段的,用法:th:fragment=&quo ...
- SpringBoot学习笔记(4)----SpringBoot中freemarker、thymeleaf的使用
1. freemarker引擎的使用 如果你使用的是idea或者eclipse中安装了sts插件,那么在新建项目时就可以直接指定试图模板 如图: 勾选freeMarker,此时springboot项目 ...
- 【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法 目录 1.搭建环境 1.1直接从网上下载SpringB ...
- SpringBoot学习笔记【part12】Web开发——Thymeleaf模板引擎
SpringBoot 学习笔记 Part12 1. thymeleaf简介 SpringBoot默认不支持 JSP,需要引入第三方模板引擎技术实现页面渲染. Thymeleaf is a modern ...
- 【学习笔记】 Thymeleaf的前端渲染(价值50)
[学习笔记] Thymeleaf的前端渲染(价值50)
- Spring Boot学习笔记-基础(2)
Spring Boot学习笔记-基础(2) Spring Boot 优点: – 快速创建独立运行的Spring项目以及与主流框架集成 – 使用嵌入式的Servlet容器,应用无需打成WAR包 – st ...
最新文章
- 恢复Opera11.50地址栏的下拉列表按钮
- ECUG 全球技术大会重回上海!
- 【2017-05-30】WebForm文件上传。从服务端删除文件
- (4)段描述符P,G位
- 介绍KeyTool GUI工具2款
- 在虚拟机上安装redis集群,redis使用版本为4.0.5,本机通过命令客户端可以连接访问,外部主机一直访问不了...
- php 微信转账,php实现微信公众号企业转账功能
- spring-security过程分析
- 一周项目实战系列--SpringBoot实现微信点餐系统(1)
- 中国菜刀使用与原理分析
- 浅析360在系统的进程自保护及突破
- GeoServer中的WPS服务
- 计算机中的正数,负数到底是什么?
- Excel如何批量将中文名字翻译为英文
- 一个变量命名神器:支持中文转变量名
- 光与影的地平线:手机AI摄影全析
- gdb中文乱码_关于中文和乱码
- 漫谈程序员系列:谁是为加班而生的
- 【MATLAB】在MATLAB中利用GUI编写加法计算器,要求:通过两个编辑文本框实现两个数字的输入,点击“开始计算”按钮进行计算,并在用于结果显示的静态文本框中实现两输入数字的和的显示
- 自制ST-LINK V2 ,ST-LINK 固件