Jinja2: Utwórz nowy wiersz na każde 3 elementy.

Question

Obecnie dla każdego artykułu w artykule tworzony jest nowy element div o klasie span4. Zamiast tego dla każdego wiersza chciałbym ograniczyć jego zawartość do trzech zakresów i utworzyć nowy wiersz po osiągnięciu tego limitu. Jak najlepiej to wdrożyć?

{% 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 %} 

Cel:

<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

Najlepszym sposobem, aby to zrobić jest użycie wbudowanego w batch filter zerwać swoją listę do trzech grup:

{% 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

Można użyć loop.index0 i loop.last wewnątrz pętli for. Oto for-loop documentation.

przykład:

{% 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 %} 

Klauzula loop.last należy zamknąć ostatniego rzędu nawet gdyby nie było mniejsze niż 3 pozycji. <div> powinien zaczynać się, gdy loop.index0 daje 0 jako pozostałą i powinno się kończyć, gdy 2 jest pozostałą wersją

Inną alternatywą byłoby grupowanie elementów w wiersze przed ich wprowadzeniem do szablonu, a następnie można po prostu wydać dwie pętle for-one wewnątrz inny.