pug - Jade 每 n 个元素添加 div

Question

我正在使用 Jade，我想每 n 个项目排成一行，比如

.row
  .product
  .product
  .product
.row

这似乎做了我想要的事情......

for p in products
  - var klass = (i % 3 == 0?"row product simpleCart_shelfItem col-md-4":"product simpleCart_shelfItem col-md-4")
  - i++
  div(class=klass)
    .. more product stuff

但这不是我想要的，因为 .row 项目被添加到同一个 div。有没有办法不用写 n 次产品内容就可以做到这一点？

Answer 1

通常在 Jade 模板中执行该逻辑的方法效果不佳。

更稳健的方法是将产品数组拆分为二维数组，即请求处理程序方法中的产品数组数组。

因此，假设您在请求处理程序方法中具有以下产品数组 (products)。您可以将其转换为二维数组 (products2D) 并将其作为参数传递给您的 Jade 模板。

例子:

function arrayTo2DArray (list, howMany) {
    var result = []; input = list.slice(0); 
    while(a[0]) { 
        result.push(a.splice(0, howMany)); 
    }
    return result;
}

var handler = function(req, res) {
   var products = [ ... ] // fetched from DB
   var products2D = arrayTo2DArray(products, 3)

   res.render('template', { products: products2D });
}

在 Jade 模板中，您可以渲染数组(这将生成 .row 元素)，然后在 .row 元素中，您可以迭代生成 .product 的产品 元素。

例子:

for prodGroup in products2D 
  .row
    ...
    for p in prodGroup
      .product
        ... more product stuff

可以引用这个post有关将数组转换为二维数组的更多示例。

希望对您有所帮助。