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。

我希望这会有所帮助。

Answer 2

代码有错误。这对我有用：

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

Answer 3

如果错误得到纠正，汤姆的答案基本上是正确的，但我会采取不同的方法。

您希望将列表分组成组的原因是您希望它以某种方式显示。所以我认为这绝对应该留在视野中。

必要的JavaScript代码可以像在unbuffered code block一样轻松地在Pug文件中运行。

最后，JavaScript有所改进，我们可以利用编写此问题时可能无法使用的一些功能。这是一个例子。

-
  let i = 0
  rows = products.reduce((accumulator, currentValue, currentIndex) => {
    if (currentIndex > 0 && currentIndex % 3 === 0) i++
    if (!Array.isArray(accumulator[i])) accumulator[i] = []
    accumulator[i].push(currentValue)
    return accumulator
  }, [])

each row in rows
  .row
    each product in row
      .product.simpleCart_shelfItem.col-md-4
        p= product.name

我知道这是一个老问题，但我今天也有同样的问题。最好的提交答案让我沿着正确的道路前进，但它有一个错字，它已经过时了，它打破了我从视图中分离数据的想法。这对我有用。

Jade每n个元素添加div

3 个答案: