thymeleaf—你可能还不知道的语法

本文建立在已经初次尝试使用thymleaf来渲染模板的前提下，后台使用spring框架。

一.在JS中使用thymeleaf

    一般来说，在JS中使用thymeleaf只需要在<script>标签加入th:inline="javascript"属性，引用后台传递的变量时只需要加上 [[ ]] 两层中括号，括号内部使用thymeleaf的变量表达式即可，如[[${blog.id}]]。这里获取了后台传递的blog对象的id。
    下面讲更为复杂一点的，如条件判断和循环语句在JS中的用法。

1.条件判断语句

Controller代码

@Controller("BlogController")
public class BlogController {

	@RequestMapping("/")
	public ModelAndView test() {
		ModelAndView model = new ModelAndView();
		model.setViewName("test");
		List<Blog> blogs;  //假设有这样一个Blog类的list
		model.addObject("blogs",blogs);  //重点——第一个参数为前端拿数据时对应的数据名

		return model;
	}
}

后台已经传递了一个命名为blogs的List，我们想判断这个list长度是否小于6

[# th:if="${#lists.size(blogs)}<6"]
	//if yes, do something
[/]
[# th:unless="${#lists.size(blogs)}<6"]
	//if no, do something
[/]

PS： thymeleaf条件判断语句常用于判断后台传递的数据是否为空。
 

2.迭代

后台已经传递了一个命名为blogs的List，我们想在JS中遍历blogs里面的内容。代码如下：

<script type="text/javascript" th:inline="javascript">
	var blogs = [];  //存放blog的对象数组
	[# th:each="blog : ${blogs}"]
		var blog = {  //将blog对象设置为和后台blog对象的数据一致
			id:[[${blog.id}]],
			title:[[${blog.title}]],
			text:[[${blog.text}]]
		};
		blogs.push(blog);
	[/]
</script>

这样就在JS中遍历了blogs list，并把后台传递的blogs list的数据在存放到在JS中定义的blogs对象数组。

PS： 如果你只想获取blogs中某一个确切下标的元素，可以这样：

//比如这里只获取第一个元素的id
var blogId = [[${blogs[0].id}]];

跟踪迭代状态

使用时th:each，Thymeleaf提供了一种机制，可用于跟踪迭代的状态：状态变量。

状态变量在th:each属性中定义，包含以下数据：

当前迭代索引，从0开始。这是index属性。
当前迭代索引，从1开始。这是count属性。
迭代变量中元素的总量。这是size属性。
每次迭代的iter变量。这是current属性。
当前迭代是偶数还是奇数。这些是even/odd布尔属性。
当前迭代是否是第一个。这是first布尔属性。
当前迭代是否是最后一次。这是last布尔属性。

<script type="text/javascript" th:inline="javascript">
	var blogIds = [];
	[# th:each="blog,blogStat : ${blogs}"]
		[#th:if="${blogStat.index}<6"]  //这里使用了状态变量的index属性，只取blogs中前6个元素的id
			var blogId = [[${blog.id}]];
			blogIds.push(blogId);
		[/]
	[/]
</script>

状态变量（blogStat在此示例中）在th:each属性中通过在iter变量本身之后写入其名称来定义，用逗号分隔。
 

二.thymeleaf表达式嵌套

比如说a标签的href属性中，你想前一部分是固定的字符串"/blog"，后一部分为blog的id。你可以这样写：

<a th:if="${blog}" th:href="@{'/blog/'+${blog.id}}" target="_blank">
	<span th:text="${blog.title}"></span>
</a>

这里是链接网址表达式里面嵌套了变量表达式
 
 

附录.使用双引号的注意事项

虽然不属于thymeleaf的内容，但是也记录一下。

1.在html中使用双引号

html中双引号使用转义字符"替代

<span th:text="${#dates.format(blog.date, &quot;yyyy年MM月dd日&quot;)}"></span>

2.在JS中使用双引号

JS中双引号使用转义字符\"替代

<script type="text/javascript" th:inline="javascript">
	document.getElementsByTagName("span")[0].innerHTML = "<a href=\"/Blog/[[${blog.id}]]\" target=\"_blank\">"+"这是一个链接"+"</a>";
;</script>

如果是用JS来生成HTML代码的这种形式(上面的代码用了innerHTML来生成)，href属性前就不用像html一样在前面加上"th:"
使用过之后发现thymeleaf和JS都可以用来渲染html，各有利弊。
thymeleaf是在页面加载的时候进行渲染，缺点就是需要刷新页面，这缺点会让JS缓存数据不可行。
而JS是只存在于当前页面，页面刷新之后，JS里面的数据也会刷新，导致原本已经从后台获取到的数据丢失，用JS渲染的话代码会变得又长又臭。