Jinja2: Crea una nuova riga per ogni 3 articoli

Question

Attualmente per ogni articolo in articoli viene creato un nuovo div con classe span4. Invece per ogni riga vorrei limitare il contenuto a tre span e creare una nuova riga una volta raggiunto il limite. Come posso implementarlo al meglio?

{% extends "base.html" %} 
{% block content %} 
<div class="container-fluid"> 
    <legend></legend> 
    <div class="row-fluid" id="main"> 
     {% for article in articles %} 
     <div class="span4"> 
      <div class="thumbnail"> 
       <a href="{{ article.url }}"><img src="http://placehold.it/300x150/483CB4"></a> 
       <div class="caption"> 
        <h4><a href="{{ article.url }}">{{ article.title }}</a></h4> 
        <p> {{ article.summary }}</p> 
       </div> 
       <legend></legend> 
       <a class="btn" href="#"><i class="icon-thumbs-up"></i></a> 
       <a class="btn" href="#"><i class="icon-thumbs-down"></i></a> 
      </div> 
     </div> 
     {% endfor %} 
    </div> 
</div> 
{% endblock %} 

Obiettivo:

<div class="row"> 
    <div class="span4">article[0]</div> 
    <div class="span4">article[1]</div> 
    <div class="span4">article[2]</div> 
</div> 
<div class="row"> 
    <div class="span4">article[3]</div> 
    <div class="span4">article[4]</div> 
    <div class="span4">article[5]</div> 
</div> 

Answer 1

Il modo migliore per farlo è quello di utilizzare il costruito nel batch filter per spezzare la vostra lista in gruppi di tre:

{% for article_row in articles | batch(3, ' ') %} 
<div class="row"> 
    {% for article in article_row %} 
    <div class="span4">{{ article }}</div> 
    {% endfor %} 
</div> 
{% endfor %} 

Answer 2

È possibile utilizzare loop.index0 e loop.last all'interno del ciclo for. Ecco lo for-loop documentation.

Esempio:

{% extends "base.html" %} 
{% block content %} 
<div class="container-fluid"> 
    <legend></legend> 
    <div class="row-fluid" id="main"> 
     {% for article in articles %} 
     {% if loop.index0 % 3 == 0 %} 
     <div class="row"> 
     {% endif %} 
      <div class="span4"> 
       ... 
      </div> 
     {% if loop.index0 % 3 == 2 or loop.last %} 
     </div> 
     {% endif %} 
     {% endfor %} 
    </div> 
</div> 
{% endblock %} 

La clausola loop.last deve chiudere l'ultima riga, anche se ci fossero meno di 3 articoli. <div> deve iniziare quando loop.index0 restituisce 0 come resto e dovrebbe terminare quando 2 è il resto

Un'altra alternativa sarebbe raggruppare gli elementi in righe prima di passarli nel modello, quindi è possibile emettere solo due for-loop uno all'interno l'altro.