Thymelblatt-Rendering

Question

Mit JSP können wir HTML-Elemente rendern als

<c:set var="size" value="0" />
<c:forEach items="${fields}" var="field" varStatus="status">

    <c:if="${status.first}">
        <div class="row">
    </c:if>

    <c:set var="size" value="${size + field.size}" />
    <c:if="${size > 12}">
        </div>
        <div class="row">
        <c:set var="size" value="${field.size}" />
    </c:if>

    <jsp:include page="/WEB-INF/jsp/field.jsp" >
        <jsp:param name="field" value="${field}"/>
    </jsp:include>  

    <c:if="${status.last}">
        </div>
    </c:if>

</c:forEach>

Hier baue ich HTML-Eingabeelemente ein <div class="row"></div> basierend auf der Größe der Felder (Größe 6 wird zu span6).Wenn meine Feldliste 4 Elemente mit den Größen 6, 3, 8 und 4 enthält, wird der HTML-Code wie folgt gerendert

<div class="row">
  <div class="span6">
     <input />
  <div>
  <div class="span3">
     <input />
   <div>
</div>
<div class="row">
  <div class="span8">
     <input />
  <div>
  <div class="span4">
     <input />
   <div>
</div>

Ich habe versucht, die ersten paar Abschnitte in Thymeleaf als umzuwandeln

<th:block th:with="size=0">
    <th:block th:each="field, iterStat : ${fields}">
        <th:block if="${iterStat.index == 0}">  
            <div class="row">
        </th:block> 
            <th:block if="${iterStat.index == (#lists.size(${fields}) - 1)}">   
            </div>
        </th:block>
    </th:block> 
</th:block> 

Aber Thymeleaf kann es nicht rendern, da das div-Tag vorhanden ist <div class="row"> ist nicht innerhalb der geschlossen <th:block> wo es begonnen wird.Gibt es eine Möglichkeit, den obigen JSP-Code in Thymeleaf zu konvertieren?

Ich verwende Thymeleaf 2.0.17 und Spring3

Answer 1

Wenn ich Sie wäre, würde ich den folgenden Code verwenden, der eine Trennung der Anliegen und auch das erreichen würde, was Sie erreichen möchten:

Erstellen Sie zunächst eine Klasse, die sich um die Erstellung von Unterlisten aus einer Größenliste kümmert.Um die Verwendung dieser Klasse innerhalb von Thymeleaf zu vereinfachen, können wir diese Klasse zu einer Spring Bean machen.Das Folgende ist ein grober Code, der diese Aufgabe erledigen würde:

@Component
public class BoostrapUtility {

   public List<List<Integer>> createSubLists(Collection<Integer> sizeList) {
        final List<List<Integer>> results = new ArrayList<>();

        final int maxSize = 12;
        int rowSize = 0;
        List<Integer> subList = new ArrayList<>();
        for (Integer size : sizeList) {
            if(rowSize + size <= maxSize) {
                subList.add(size);
                rowSize += size;
            }
            else {
                results.add(subList);
                subList = new ArrayList<>();
                subList.add(size);
                rowSize = size;
            }
        }
        if(!subList.isEmpty()) {
            results.add(subList);
        }

        return results;
   }
}

Dann würde Ihr Thymeleaf-Code etwa so aussehen:

<div class="row" th:each="subLists : ${@boostrapUtility.createSubLists(${fields})}">
   <div th:class="span+${field}" th:each="field : ${subLists}">
     <!-- whatever in here -->
   </div>
</div>