如何选择 Thymeleaf 片段内的子元素位置？答案

【问题标题】：How to choose children elements position inside a Thymeleaf's fragment?如何选择 Thymeleaf 片段内的子元素位置？
【发布时间】：2016-04-08 03:04:03
【问题描述】：

我想使用 Thymeleaf 选择片段内子元素的位置，如下例所示。

fragments.html：

<div th:fragment="awesomeFragment">
     Some Text
     <div><!-- children must be here --></div>
</div>

view.html:

<div th:replace="fragments :: awesomeFragment">
     <a href="www.google.com"/>
</div>

预期输出：

<div>
     Some Text
     <div><a href="www.google.com"/></div>
</div>

有可能吗？如果是这样，我该怎么做？

【问题讨论】：

标签： java spring-mvc model-view-controller thymeleaf page-fragments

【解决方案1】：

您可以通过布局来做到这一点。
为此请使用Thymeleaf Layout Dialect。
（如果你使用Spring Boot，它已经打开了！）

布局将以这种形式呈现：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title></title>
</head>
<body>
    <header>
        Some text
    </header>
    <div layout:fragment="content">
        <p>Page content goes here</p>
    </div>
</body>

你的页面将是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="base/test">
<head>
    <title></title>
</head>
<body>
    <div layout:fragment="content">
        <a href="www.test.com">Test.com</a>
    </div>
</body>

我在我的Thymeleaf 测试项目中尝试过。浏览器中页面的源代码结果如您所愿：

【讨论】：

真的有必要声明命名空间吗？我在没有命名空间声明的情况下完成了它，所有的工作都像一个魅力。
Sam，虽然你的回答足以解决我的部分问题，但我仍然有疑问。更多详情如下

【解决方案2】：

编辑：

以下问题已解决！可以使用Includes and Fragments 来完成。

Sam，虽然你的回答足以解决我的部分问题，但我仍有疑问。

此方法将元素及其所有祖先替换为布局中指定的元素，并保留原始元素的内容。

它适用于布局，但是只替换片段的内容怎么样？

假设我有以下情况。我正在开发一个引导小部件库。一些小部件，如导航栏有内部容器，而这个容器将包含其他元素。例如：

片段/navbar.html

<!-- navbar --> 
<div th:fragment="navbar" class="navbar">
    <div class="navbar-inner">        
        <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
        <ul class="nav">
            <!-- children goes here -->                
        </ul>
    </div>
</div>
<div>

index.html 内

This is my Navbar:
<div th:replace="fragments/navbar :: navbar">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</div>

并得到以下输出：

    This is my Navbar:    
    <!-- navbar --> 
    <div th:fragment="navbar" class="navbar">
            <div class="navbar-inner">        
                <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    <div>

你明白其中的区别吗？他们向我展示的方式替换了元素及其祖先，但保留了内容。结果是整个文档根被替换。

在某些情况下，我只需要替换被替换的元素。我也需要保留它的父母和内容。

正如我所说，它已经解决了。下面是一个如何实现的示例：

布局/navbar.html：

<!DOCTYPE html>
<html>
<body>       
    <div layout:fragment="navbar" class="navbar">
        <div class="navbar-inner">        
            <a class="brand" href="#">Navbar</a>
            <ul class="nav" layout:fragment="navbar-content">
                <!-- children goes here -->                
            </ul>
        </div>
    </div>  
</body>
</html>`

文档.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home</title>
    </head>
    <body>This is my Navbar:
        <div layout:include="layouts/navbar :: navbar" th:remove="tag">
            <ul layout:fragment="navbar-content">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </body> 
</html>

【讨论】：