Question

使用jsp我们可以将html元素渲染为

<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>

这里我根据字段的大小在<div class="row"></div>中构建htmls输入元素（大小6变为span6）。如果我的字段列表包含4个大小为6,3,8和4的元素，它将把html呈现为

<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>

我尝试将前几节转换为百日咳作为

<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>

但是百万富翁无法呈现它，因为div标签<div class="row">未在启动时<th:block>内关闭。有没有办法将上面的jsp代码转换为百万美元。

我正在使用thymeleaf 2.0.17和spring3

Answer 1

如果我是你，我会使用以下代码来实现关注点分离，并实现您的目标：

首先创建一个类，负责从大小列表中创建子列表。为了便于使用Thymeleaf这个类，我们可以使这个类成为一个Spring bean。以下是完成该工作的原始代码：

@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;
   }
}

然后你的Thymeleaf代码看起来像：

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

Thymeleaf渲染

1 个答案: