在百里香中结合条件和迭代 [英] Combining conditions and iterations in thymeleaf

查看：23
本文介绍了在百里香中结合条件和迭代的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用 thymeleaf 和 bootstrap 生成一个产品列表，以便我连续拥有三个产品.

如果不是为了行，我会做这样的事情:

<div class="product"><h3 th:text="${product.name}">产品名称</h3><img th:src="${product.imagePath}"/>

但我想将每三个产品包含在一个 <div class="row"> 中，我就是不知道如何做到这一点.有没有其他人偶然发现这个问题?如何在不显式在控制器中创建三个产品列表的情况下实现所需的输出?

期望的输出

<div class="col-sm-4"><div class="product"><h3>产品 1 名称</h3><img src="/path/to/image"/>

<div class="col-sm-4"><div class="product"><h3>产品2名称</h3><img src="/path/to/image"/>

<div class="col-sm-4"><div class="product"><h3>产品3名称</h3><img src="/path/to/image"/>

<div class="row"><div class="col-sm-4"><div class="product"><h3>产品 1 名称</h3><img src="/path/to/image"/>

<div class="col-sm-4"><div class="product"><h3>产品2名称</h3><img src="/path/to/image"/>

<div class="col-sm-4"><div class="product"><h3>产品3名称</h3><img src="/path/to/image"/>

解决方案

我会包含 Apache Commons Collections 4.1 并使用 ListUtils 对列表进行分区并像这样迭代:

<div class="row" th:each="partition: ${partitions}"><div class="col-sm-4" th:each="product: ${partition}"><div class="product"><h3 th:text="${product.name}">产品名称</h3><img th:src="${product.imagePath}"/>
</th:block>

I want to generate a list o products using thymeleaf and bootstrap so that I have three products on a row.

If it weren't for the rows, I would have done something like:

<div class="col-sm-4" th:each="product, : ${products}">
  <div class="product">
    <h3 th:text="${product.name}">Product name</h3>
    <img th:src="${product.imagePath}" />
  </div>
</div>

But I want to enclose each three products in a <div class="row"> and I just can't figure out how to do this. Has anyone else stumbled upon this problem ? How can I achieve the desired output without explicitly creating lists of three products in the controller ?

Desired output

<div class="row">
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 1 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 2 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 3 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 1 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 2 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="product">
      <h3>Product 3 name</h3>
      <img src="/path/to/image" />
    </div>
  </div>
</div>

解决方案

I would include Apache Commons Collections 4.1 and use ListUtils to partition the list and iterate like this:

<th:block th:with="partitions=${T(org.apache.commons.collections4.ListUtils).partition(products, 3)}">
  <div class="row" th:each="partition: ${partitions}">
    <div class="col-sm-4" th:each="product: ${partition}">
      <div class="product">
        <h3 th:text="${product.name}">Product name</h3>
        <img th:src="${product.imagePath}" />
      </div>
    </div>
  </div>
</th:block>

这篇关于在百里香中结合条件和迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆