Как добавить кнопку в конце цикла с веткой - PullRequest
0 голосов
/ 01 мая 2019

ОБНОВЛЕНИЕ: я отвечаю на мой вопрос с решением, кто работает.См. Ниже.

Я создал цикл, который отображает сообщения.Каждые две итерации создается новый row.

Мой цикл повторяется вокруг этого списка сообщений.Кнопка не рассматривается в этом массиве.Но моя проблема в том, что я хотел бы добавить кнопку в последнем столбце.

В настройках моего бэк-офиса я даю возможность показать или нет эту кнопку.Поэтому иногда мне не нужно добавлять последний столбец с этой кнопкой.

Более того, мне нужно добавить col-md-push-2 в каждом столбце по два, потому что я использую сетку Bootstrap (даже в столбце кнопки, когдакнопка активна в бэк-офисе).

enter image description here

Я написал этот код, который отлично работает.Но я не знаю, куда добавить свою кнопку.

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if buttonIsActive %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
</div>

Я не знаю, где я могу добавить код для своей кнопки.Я знаю, что у меня есть кнопка в каждой строке: - (

Пример HTML-кода, который я пытаюсь сгенерировать.

<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

1 голос
/ 02 мая 2019

Я отвечаю на мой вопрос с вариантом, который работает и использует batch.

{% for row in posts|batch(2) %}
<div class="group">
    <div class="row">
        {% for item in row %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        {% endfor %}
        {% if btn_statut == true and loop.last and posts|length is not divisible by(2) %}
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if btn_statut == true and loop.last and posts|length is divisible by(2) %}
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}
0 голосов
/ 01 мая 2019

Чтобы разместить кнопку в нужном месте, внутри открытой строки или открыть новую строку, вы можете проверить, равно ли количество элементов внутри сообщений или нет.Обратите внимание, вам нужно будет выполнить тест дважды, один раз для четного и один раз для неровных

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if loop.last and posts|length % 2 != 0 %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
    {% if posts|length % 2 == 0 %}
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>        
        </div>
    </div>
    {% endif %}
</div>

demo

...