Twig循环分组div

时间:2014-06-22 20:19:06

标签: html css symfony twig

我想填充一个包含存储在数据库中的信息的树枝页面。我使用循环来生成包含相同表的不同条目的多个div。唯一的问题是我想将div分组为4 ..当我到达第四步时,我无法阻止循环。最后我得到一个div的大冒号。 谁能告诉我如何将div分组为4?

这是我的树枝模板:

<form method="POST" id="form-book">
    <section id="portfolio" class="container main">    
        <ul class="gallery col-4">             
           {% for type in typeandrooms %}
           {% for t, room in type %}
           <li>
               {% if t == 0 %}
               <div class="preview">
                   {% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
                   {% set var_id = var_id ~ room.getType.id %}
                   {% set var_id = var_id ~ '.jpg' %}
                   <img src="{{ asset(var_id) }}">
                   <div class="overlay">
                   </div>
               </div>
               <div class="desc">
                   <h5> {{ room.getType.name }} </h5>
                   <strong>Beds: </strong>Double bed<br/>
                   <strong>Available rooms: </strong> {{ type|length }} <br/>
                   <strong>Prices: </strong> {{ room.getPrice }} <br/>
                   <button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
               </div> 
               {% endif %}
           {% if loop.index % 4 == 0 and loop.index > 0 %}
           </li>
           Al 4-lea pas
           <li>
           {% endif %} 
           </li> 
       {% endfor %}
       {% endfor %}
       </ul>
   </section>
</form>
{% endfor %}

问题解决了。这是新模板:

<form method="POST" id="form-book">
    <section id="portfolio" class="container main">    
        <ul class="gallery col-4">          

            {% for rooms in typesandrooms %}                  

                {% for room in rooms %}
                    {% if loop.index == 1 %}
                        <li>    
                            <div class="preview">
                                {% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
                                {% set var_id = var_id ~ room.getType.id %}
                                {% set var_id = var_id ~ '.jpg' %}
                                <img src="{{ asset(var_id) }}">
                                    <div class="overlay">
                                    </div>
                            </div>

                            <div class="desc">
                                <h5> {{ room.getType.name }} </h5>
                                <strong>Facilities: </strong>{% for facility in room.getFacilities %} {% if loop.index < 4 %} {{ facility.getFacility }}; {% endif %} {% endfor %}<br/>
                                <strong>Available rooms: </strong> {{ rooms|length }} <br/>
                                <strong>Prices: </strong> {{ room.getPrice }} Lei <br/>
                                <button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
                            </div>
                        </li>       
                    {% endif %}

                {% endfor %}

            {% endfor %}

        </ul>
    </section>
</form>

1 个答案:

答案 0 :(得分:0)

你必须在循环之前打开第一行。

 {% for type in typeandrooms %}
+  <li>
 {% for t, room in type %}
-  <li> 

之后关闭最后一个
    {% endif %} 
    -  </li> 
    {% endfor %}
    + </li>
{% endfor %} 

鉴于此行{% if t==0 %},我认为您需要使用计数器而不是index.loop。否则,每个列表行可能会少于4个房间。最佳做法是首先在控制器中解析数组,然后删除t == 0的房间,然后删除树枝模板中的{% if t==0 %}行,它将与index.loop一起使用,你想把树枝中的逻辑保持在最低限度。