2

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

片段.html：

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

视图.html：

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

预期输出：

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

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

4

2 回答 2

2

你可以通过布局来做到这一点。
为此使用Thymeleaf 布局方言。
（如果你使用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测试项目中尝试过。浏览器中页面的源代码结果如您所愿：

页面源代码

于 2016-04-08T04:03:55.737 回答
2

编辑：

下面的问题就解决了！可以使用Includes 和 Fragments来完成。

山姆，尽管您的回答足以解决我的部分问题，但我仍然有疑问。

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

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

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

片段/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>

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

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

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

布局/导航栏.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>
于 2016-04-09T20:27:18.523 回答