Динамически добавлять строки в зависимости от размера коллекции - PullRequest
0 голосов
/ 04 августа 2020
• 1000

В настоящее время я могу отрендерить 8 объектов в 3 строки. Однако вместо того, чтобы создавать строку под предыдущей, он создает новую row div внутри текущей, делая макет вне строки.

Я думаю, что условие для закрывающего оператора div дает мне проблемы.

Код, который отображает карты:

    <% @count = 0 %>
    <% @col_count = 0%>
    <div class="card-group">
        <% @user.articles.each do |article| %>
            <% if @count == 3 %>
                <% @count = 0%>
            <% end %>

            <% if @count == 0 %>
                <div class="row">
            <% end %>
            
                <div class="card col-4">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Test Card</h5>
                        <p class="card-text">This is a placeholder card.</p>
                    </div>           
                </div>
            
            <% if @count == 0 && @col_count == 2 %>            
                </div>
                <% @col_count = 0 %>
            <% end %>

            <% @count = @count + 1 %>
            <% @col_count = @col_count + 1 %>
        <% end %>
    </div>    

Любая помощь приветствуется.

1 Ответ

2 голосов
/ 04 августа 2020

Я думаю, лучше, если вы используете each_slice вместо этого, он должен выглядеть так:

        <% @user.articles.each_slice(3) do |articles| %>
            <div class="row">
            <% articles.each do |article| %>
            
                <div class="card col-4">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Test Card</h5>
                        <p class="card-text">This is a placeholder card.</p>
                    </div>           
                </div>
            <% end %>
            </div>
        <% end %>

Пожалуйста, поправьте меня, если я сделаю какую-либо ошибку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...