带计数器的循环答案

【问题标题】：Loop with counter带计数器的循环
【发布时间】：2014-12-19 05:54:58
【问题描述】：

我正在尝试使用翡翠制作古老的画廊循环计数器（我是新手）。我正在使用 twitter 引导程序，因此我需要将图像放入 div 中，将 col-md-3 作为一个类，并将其作为具有行的 div 的子级”。所以，理想情况下它看起来像这样：

<div class="row">
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
</div>
<div class="row">
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
    <div class="col-md-3">image goes here</div>
</div>

我遇到的困难是如何初始化新行，因为缩进在翡翠中很重要。下面是我的开始，我该如何进行？

div.row
    each product, index in collection.products
        div.col-md-3: img

我假设你会使用类似的东西：

if index % 3
    div.row

...但是感觉不太对劲...

【问题讨论】：

标签： python html pug pyjade

【解决方案1】：

解决了它朝着不同的方向发展。我在views.py 文件的顶部创建了一个context_processor，它可以作为一个函数在我的模板中使用。

views.py

@app.context_processor
def utility_processor():
    def subdivide_list(list_to_group, group_size):
        return [list_to_group[i:i+group_size] for i  in range(0, len(list_to_group), group_size)]
return dict(subdivide_list=subdivide_list)

画廊.翡翠

div.col-md-9
    for product_row in subdivide_list(all_products, 4)
        div.row
            for product in product_row
                img(src="{{ url_for('static', filename='uploads/images/products/'+product.image.name_thumb) }}")

【讨论】：