Как выбрать положение дочерних элементов внутри фрагмента Thymeleaf?

Я хотел бы выбрать положение дочерних элементов внутри фрагмента, используя 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>

Является ли это возможным? Если так, как я мог сделать это?

Источник

2 ответа

Решение

Вы можете сделать это с помощью макетов.
Используйте 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 тестовый проект. Исходный код страницы в браузере получился так, как вы хотели:

исходный код страницы

Источник

Редактировать:

Следующий вопрос решен! Это можно сделать с помощью Включений и Фрагментов.

Сэм, хотя твой ответ удовлетворителен, чтобы решить часть моих проблем, у меня все еще есть сомнения.

Этот метод заменяет элемент и всех его предков теми, которые указаны в макете, и сохраняет содержимое исходного элемента.

Это хорошо работает для макетов, но как насчет замены содержимого только фрагмента?

Предположим, у меня есть следующий сценарий. Я разрабатываю библиотеку загрузочных виджетов. Некоторые виджеты, такие как navbar, имеют внутренние контейнеры, и эти контейнеры будут содержать другие элементы. Напр.:

фрагменты /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>`

document.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>
Источник
Другие вопросы по тегам