Template Fragments
We will often want to include in our templates fragments from other templates. Common uses for this are footers, headers, menus…
Now let’s say we want to add a standard copyright footer to all our grocery pages, and for that we define a /WEBINF/templates/footer.html file containing this code:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>
The code above defines a fragment called copy that we can easily include in our home page using one of the th:include or th:replace attributes:
<body>
...
<div th:include="footer :: copy"></div>
</body>
Difference between th:include and th:replace
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
…will result in:
<body>
...
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</body>
Fragments mit Parametern
<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
<div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div>
Fragments will still be able to access every context variable being used at the calling template like they currently are
Die Attribute bein einem Fragment validieren:
The th:assert attribute can specify a comma-separated list of expressions which should be evaluated and produce true for every evaluation, raising an exception if not.
<div th:assert="${onevar},(${twovar} != 43)">...</div>
This comes in handy for validating parameters at a fragment signature:
<header th:fragment="contentheader(title)" th:assert="${!#strings.isEmpty(title)}">...</header>
Selektoren
The syntax for both these inclusion attributes is quite straightforward. There are three different formats:
- "templatename::domselector" or the equivalent templatename::[domselector] Includes the fragment resulting from
executing the specified DOM Selector on the template named templatename .
- Note that domselector can be a mere fragment name, so you could specify something as simple as templatename::fragmentname like in the footer :: copy above.
DOM Selector syntax is similar to XPath expressions and CSS selectors, see the Appendix C for more info on this syntax.
- "templatename" Includes the complete template named templatename .
- ::domselector" or "this::domselector" Includes a fragment from the same template.
Both templatename and domselector in the above examples can be fully-featured expressions
Fragments can include any th:* attributes . These attributes will be evaluated once the fragment is included into the target template (the one with the th:include / th:replace attribute), and they will be able to reference any context variables defined in this target template.
Man kann aber auch Fragments referenzieren, welche nicht das th:fragment haben (Mit DOM-Selektoren). Beispiel:
...
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
...
We can use the fragment above simply referencing it by its id attribute, in a similar way to a CSS selector:
<body>
...
<div th:include="footer :: #copy-section"></div>
</body>