你能遍历一个 Thymeleaf 片段列表吗？答案

【问题标题】：Can you iterate over a list of Thymeleaf fragments?你能遍历一个 Thymeleaf 片段列表吗？
【发布时间】：2020-05-27 09:47:15
【问题描述】：

我有一个具有标准页面布局和许多内容模板的应用程序。每个内容模板都可以有一个或多个我想将其视为片段的内容部分。我希望能够遍历每个片段并在放入格式化 div 后分别包含它。我的想法是，我不希望每个内容页面都必须知道如何嵌套 section 和 div 标签才能使页面正确格式化。我尝试了以下方法但没有成功：

layout.html：

<html xmlns:th="http://www.thymeleaf.org"
      th:fragment="layout(contentFragments)">
<section class="row-outer-sm"
         th:each="frag,iterStat : ${contentFragments}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                <div th:if="${iterStat.first}"
                         th:replace="fragments/messages :: messages">
                    Messages go here
                </div>
                <div th:replace="${frag}">
                   Content goes here.
                </div>
            </div>
        </div>
    </div>
</section>
</html>

content.html：

<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      th:replace="fragments/layout :: layout(~{:: div.section-content})">
<div class="section-content">
   Some things for my first section
</div>

<div class="section-content">
    Some things for my second section
</div>
</html>

content.html 中的片段表达式正确地找到了所有具有 section-content 类的 div，但它们似乎作为单个连接片段传递到 layout.html。有什么方法可以获取可用于“th:each”标签的片段列表？

【问题讨论】：

标签： thymeleaf

【解决方案1】：

这不是一个特别优雅的解决方案，但我认为它可以满足您的需求。它会重新安排您的方法，因此可能需要根据您的具体情况进行一些翻译。

它有点脆弱，因为你必须保持部分的数量（解释如下）。

layout.html:

<html xmlns:th="http://www.thymeleaf.org"
      th:fragment="layout">

    <section class="row-outer-sm"
             th:each="i,iterStat : ${#numbers.sequence(1, 3)}"
             th:with="section=${'section-' + i}">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">

                    <div th:if="${iterStat.first}">
                        Messages go here
                    </div>

                    <div th:replace="~{/content.html :: __${section}__} ">
                        Content goes here.
                    </div>
                </div>
            </div>
        </div>
    </section>

</html>

content.html:

<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <div th:fragment="section-1">
        <div class="section-content">
            Some things for my first section
        </div>
    </div>

    <div th:fragment="section-2">
        <div class="section-content">
            Some things for my second section
        </div>
    </div>

    <div th:fragment="section-3">
        <div class="section-content">
            Some things for my third section
        </div>
    </div>

</html>

布局模板根据 Thymeleaf 的序列生成器构建动态创建的片段选择器section_n，其中n 是迭代值：

${#numbers.sequence(1, n)}

这是脆弱的部分 - 您必须记住保持 n 的硬编码值与内容模板中的部分片段的数量（和名称！）一致。

我们还使用 Thymeleaf 的预处理 __${}__ 指令来允许 th:replace 对字符串 - 模板选择器进行操作。

在我的示例中，最终结果是这样的 HTML（格式有点奇怪）：

    <section class="row-outer-sm">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">

                    <div>
                        Messages go here
                    </div>

                    <div>
        <div class="section-content">
            Some things for my first section
        </div>
    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row-outer-sm">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">



                    <div>
        <div class="section-content">
            Some things for my second section
        </div>
    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row-outer-sm">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">



                    <div>
        <div class="section-content">
            Some things for my third section
        </div>
    </div>
                </div>
            </div>
        </div>
    </section>

希望对你有所帮助，或者至少能给你一些启发。

【讨论】：