Можете ли вы перебрать список фрагментов Thymeleaf? - PullRequest
Новая
       0

Можете ли вы перебрать список фрагментов Thymeleaf?

0 голосов
/ 12 февраля 2020

У меня есть приложение со стандартным макетом страницы и множеством шаблонов контента. Каждый шаблон контента может иметь один или несколько разделов контента, которые я хочу рассматривать как фрагменты. Я хотел бы иметь возможность перебирать каждый фрагмент и включать его отдельно после добавления форматирования div. Идея заключается в том, что я не хочу, чтобы каждая страница содержала информацию о том, как вложить раздел и теги 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>

Фрагмент выражения в содержимом . html правильно находит все элементы div с классом section-content, но они, похоже, передаются в макет. html в виде единого объединенного фрагмента. Есть ли способ получить список фрагментов, которые я могу использовать для тега "th: each"?

1 Ответ

0 голосов
/ 16 февраля 2020

Это не особенно элегантное решение, но я думаю, что оно делает то, что вам нужно. Он перестраивает ваш подход, поэтому может потребоваться его перевод в ваш конкретный c контекст.

Это немного хрупко, потому что вам нужно вести подсчет разделов (объяснено ниже).

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>

Шаблон макета создает динамически созданный селектор фрагмента section_n, где n - итерированный значение, основанное на генераторе последовательностей Thymeleaf: 

${#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>

Надежда, которая помогает или, по крайней мере, дает вам вдохновение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...