Thymeleaf3模板嵌套的使⽤
Thymeleaf3 中，⽀持了新的表达式~{ }，这个表达式是专门⽤于处理⽚段（fragment）的，同时也可以⽤于选择当前⽂件内容中的⽚段（fragment），并且⽀持模板引⼊时⼀起调⽤，增加了很⼤的模板灵活性。
官⽅样例
官⽅⽂档中的样例如下：
This allows us to create our fragments in a way such that they can be enriched with markup coming from the calling templates, resulting in a very flexible template layout mechanism.
Note the use of the title and links variables in the fragment below:
<head fragment="common_header(title,links)">
<title replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet"type="text/css"media="all"href="@{/css/awesomeapp.css}">
<link rel="shortcut icon"href="@{/images/favicon.ico}">
<script type="text/javascript"src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<block replace="${links}"/>
</head>
We can now call this fragment like:
...
<head replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet"href="@{/css/bootstrap.min.css}">
<link rel="stylesheet"href="@{/themes/smoothness/jquery-ui.css}">
</head>
...
…and the result will use the actual <title> and <link> tags from our calling template as the values of the title and links variables, resulting in our fragment being customized during insertion:
...
<head>
<title>Awesome - Main</title>
<!-- Common styles and scripts -->
<link rel="stylesheet"type="text/css"media="all"href="/awe/css/awesomeapp.css">
<link rel="shortcut icon"href="/awe/images/favicon.ico">
<script type="text/javascript"src="/awe/sh/scripts/codebase.js"></script>
<link rel="stylesheet"href="/awe/css/bootstrap.min.css">
<link rel="stylesheet"href="/awe/themes/smoothness/jquery-ui.css">
</head>
...
个⼈使⽤样例
当时看到官⽅的使⽤样例后，理解到的是 ~{}是将所有的 link标签和script标签内容都引⽤了，如果只需要部分的link和script 甚⾄是别的tag，是否可以做到呢？在亲⾃尝试了之后，发现了实现的办法。⽬前个⼈已经使⽤到的⽅式如下：
1. head内容的引⼊
在⼀个base模板中可以定义⼀个项⽬中常⽤的head内容，例如 <meta>, <link>,<script>等。
在满⾜全部页⾯的基础引⽤上，往往有个别页⾯需要引⼊额外的css或者js脚本内容。有了表达式~{}之后，就⽅便多了，如下写：base.html:
<head fragment="commonHeader(title,links,scripts)">
<title replace="${title}">title</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<link rel="stylesheet"href="@{/asserts/css/page.css}"href="../static/asserts/css/page.css"type="text/css"
media="screen, projection"/>
<script type="text/javascript"src="@{/asserts/js/jquery-1.8.2.min.js}"src="../static/asserts/js/jquery-1.8.2.min.js"></script>
<!--/*
⽤于替换的内容，可以让调⽤⽅⾃定义⼀些link 和 script
具体实例，参考 left.html 的 head部分
*/-->
<block replace="${links}"/>
<block replace="${scripts}"/>
</head>
main.html:
<head replace="base::commonHeader(~{::title},~{::links},~{::scripts})">
<title>main</title>
<block fragment="links">
<!--/* 在这⾥写额外的link标签 */-->
<link rel="stylesheet"href="../static/asserts/css/screen.css"
href="@{/asserts/css/screen.css}"type="text/css"
media="screen, projection"/>
</block>
<block fragment="scripts">
<!--/* 在这⾥写额外的script标签 */-->
<script language="JavaScript">
function fun(){
...
}
</script>
</block>
<!--/* 这⾥开始的head部分就不会被保留了 */-->
<script type="text/javascript"
src="../static/asserts/js/jquery-1.8.2.min.js"></script>
</head>
在Thymeleaf3渲染之后得到如下结果：
<head>
<title>main</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<link rel="stylesheet"href="/asserts/css/page.css"type="text/css"
media="screen, projection"/>
<script type="text/javascript"src="/asserts/js/jquery-1.8.2.min.js"></script>
<link rel="stylesheet"href="/asserts/css/screen.css"
type="text/css"
media="screen, projection"/>
<script language="JavaScript">
function fun(){
...
}
</script>
</head>
如果不需要额外的引⼊ css 或者 js，则可以这么传递参数：
<head replace="base::commonHeader(_,_,_)">
</head>
2. 整个界⾯样式的固定
在<head>使⽤的基础上，还可以将常规将常规的界⾯整个⽂件作为模板，将个别内容使⽤ <th:replace>进⾏替换。例如，将⼀个查询界⾯连同样式均作为模板，其中的 查询条件区域 ， 结果展⽰区域 之外的内容均可以固定下来，然后按照需要将查询条件、结果展⽰区域嵌⼊：
queryBase.html
<form id="form"action="javascript:void(0)"action="@{/queryDemo}"method="post"name="form"> <block fragment="main(query,result)">
<!-- 查询功能区 -->
<div class="userbox">
<div><b class="b1"></b><b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="contentb">
<block replace="${query}">
等待替换
</block>
</div>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>
</div>
<!--/* 查询结果 */-->
<div class="tablebox" >
<block replace="${result}">
等待替换
</block>
<br/>
<br/>
<!--/*
分页操⽚段块
*/-->
<div class="table_navi"fragment="pageBar">
......
</div>
</div>
</block>
</form>
在具体的查询界⾯
queryList.html
<!--/* 查询条件 */-->
<form id="form"action="javascript:void(0)"action="@{/queryDemo}"method="post"name="form">
<!--/*
th:fragment="queryArea" 定义查询框内容
th:fragment="resultArea" 定义结果展⽰内容
*/-->
<block replace="queryBase::main(~{::queryArea},~{::resultArea})">
<!--/* 只需要写真正的查询内容table，引⽤模板时，直接传⼊ */-->
<table fragment="queryArea"
border="0"cellspacing="3"cellpadding="0"class="content_table">
<tr>
<td width="120"height="30"align="right">
⽇期:
</td>
<td>
<input class="userbox_bt"
name="createTime" type="text"
th:value="${#calendars.format(createTime,'yyyy-MM-dd')}"
onclick = "WdatePicker({dateFmt:'yyyy-MM-dd'})" />
</td>
....省略....
</tr>
<tr>
<td height="30"colspan="15"align="right">
<input type="submit"value="查询"class="inp_L3"/>
</td>
</tr>
jquery是什么有什么作用
</table>
<!--/* 只需要写真正的结果内容table，引⽤模板时，直接传⼊ */-->
<table fragment="resultArea"width="100%"border="0"cellspacing="0"cellpadding="0">
<!--/* 表头 */-->
<tr class="titlebg">
<td align="center"nowrap="nowrap"class="titlebg">
全选<input type="checkbox"id="mainBox"/>
</td>
<td align="center"nowrap="nowrap"class="titlebg">
⽇期
</td>
.
...省略....
</tr>
<!--/* 这个注释之间的内容会在渲染之后去掉 */-->
<tr if="${orderVoList}"each="order,stat:${orderVoList}">
<td align="center"nowrap="nowrap">
<input type="checkbox"name="objId"id="objId+${unt}"value="${order.id}"value="testId"/>
<input type="hidden"name="objStatus"value="${order.status}"/>
</td>
<td align="center"nowrap="nowrap"
text="${#calendars.ateTime,'yyyy-MM-dd')}">
2018-01-01
</td>
....省略....
</tr>
</table>
</block>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论