thymeleaf(3) - Iteration

官方文档(2.x):https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#iteration

 

翻译的官方文档,可以直接看文档里的说明,更能有自己的体会和收获。

1.  Iteration基础

1.1 使用th:each

对于我们的产品列表页,我们将产品列表放到request上下文中(这里已经与SpringBoot集成):

@RequestMapping("/product/list")

public String productList(Model model) {
    // 产品列表
    model.addAttribute("prodList", productService.listAll());

    // 对应于src/main/resources/templates/product-list.html
    return "product-list";

}

在product-list.html页面上使用th:each去迭代prodList(产品列表)

<body>
    ...
    <h1>Product list</h1>
  
    <table>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>现货</th>
      </tr>
      <tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">洋葱</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? '有' : '无'">有</td>
      </tr>
    </table>
    ...
</body>
  • ${prods}:被迭代表达式或被迭代变量
  • prod:迭代变量

提示:prod变量将仅仅可以在<tr>元素内部使用(包括内部标签如<td>)

 

1.2 可以迭代的类型

  • 实现了java.util.Iterable的对象
  • 实现了java.util.Map的对象,迭代变量是java.util.Map.Entry
  • 数组
  • 任何其他对象都将被视为包含对象本身的单值列表

 

2. 保持迭代状态

在使用th:each时,Thymeleaf提供了一种实用的,用于跟踪迭代状态的机制-状态变量。状态变量在th:each属性中被定义,主要包含以下变量:

  • index:当前迭代下标,从0开始
  • count:当前迭代下标,从1开始
  • size:迭代变量元素总数
  • current:当前迭代的元素
  • even/odd:是否当前迭代是偶数/奇数
  • first:是否当前迭代是第一个
  • last:是否当前迭代是最后一个

2.1 让我们看下如何在之前的例子中使用这些状态变量:

<table>
  <tr>
    <th>名称</th>
    <th>价格</th>
    <th>现货</th>
  </tr>
  <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">洋葱</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? '有' : '无'">有</td>
  </tr>
</table>

我们可以看到,在迭代变量(prod)后定义了状态变量iterStat,通过英文逗号分隔。状态变量只可以在包含th:each属性的标签下使用。

2.2 假如我们不明确地设置一个状态变量,Thymeleaf将会自动为我们创建一个,变量名为:迭代变量+Stat

例2.1中自动创建的状态变量名为prodStat,那么可以修改为下面的形式:

<table>
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th>价格</th>
    <th>现货</th>
  </tr>
  <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
    <td th:text="${prodStat.count}">1</td>
    <td th:text="${prod.name}">洋葱</td>
    <td th:text="${prodStat.current.price}">2.41</td>
    <td th:text="${prod.inStock}? '有' : '无'">有</td>
  </tr>
</table>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值