本文建立在已经初次尝试使用thymleaf来渲染模板的前提下,后台使用spring框架。
一般来说,在JS中使用thymeleaf只需要在标签加入
th:inline="javascript"
属性,引用后台传递的变量时只需要加上 [[ ]] 两层中括号,括号内部使用thymeleaf的变量表达式即可,如[[${blog.id}]]
。这里获取了后台传递的blog对象的id。
下面讲更为复杂一点的,如条件判断和循环语句在JS中的用法。
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条件判断语句常用于判断后台传递的数据是否为空。
后台已经传递了一个命名为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变量本身之后写入其名称来定义,用逗号分隔。
比如说a标签的href属性中,你想前一部分是固定的字符串"/blog",后一部分为blog的id。你可以这样写:
<a th:if="${blog}" th:href="@{'/blog/'+${blog.id}}" target="_blank">
<span th:text="${blog.title}">span>
a>
这里是链接网址表达式里面嵌套了变量表达式
虽然不属于thymeleaf的内容,但是也记录一下。
html中双引号使用转义字符"
替代
<span th:text="${#dates.format(blog.date, "yyyy年MM月dd日")}">span>
JS中双引号使用转义字符\"
替代
<script type="text/javascript" th:inline="javascript">
document.getElementsByTagName("span")[0].innerHTML = ""+"这是一个链接"+"";
;</script>
如果是用JS来生成HTML代码的这种形式(上面的代码用了innerHTML来生成),href属性前就不用像html一样在前面加上"th:"
使用过之后发现thymeleaf和JS都可以用来渲染html,各有利弊。
thymeleaf是在页面加载的时候进行渲染,缺点就是需要刷新页面,这缺点会让JS缓存数据不可行。
而JS是只存在于当前页面,页面刷新之后,JS里面的数据也会刷新,导致原本已经从后台获取到的数据丢失,用JS渲染的话代码会变得又长又臭。