@mrkovalchuk
Junior developer

Django + ajax. Как правильно поступить для дозагрузки объектов?

Доброго времени суток.

Что есть: страничка, на которой выгружаются объекты, вот её фрагмент (привожу секцию для удобства):

index.html
<section>
            <!-- Latest news title -->
            <div class="wrap wrap_white">
                <div class="container title">
                    <h1 class="title__h1 underscore">Latest news</h1>
                </div>
            </div>
            <!-- END Latest news title -->
            <div class="wrap wrap_gray pt20">
                <div class="container">
                    <div class="row">
                        {% for news in news_items_list %}
                            {% if forloop.counter == 1 %}
                                <div class="col-sm-6">
                                    <div class="thumbnail thumbnail_big">
                                        <img src="{{ news.image.url }}" height="350" width="560" alt="News">
                                        <div class="caption thumbnail__caption">
                                            <div class="news caption__news">
                                                <p class="news__category yellow-line">{{ news.category }}</p>
                                                <a href="{% url 'mainApp:detail_news' news.id %}" class="news__head">{{ news.title }}</a>
                                                <p class="news__desc"> {{ news.content | truncatechars:360  }}</p>
                                            </div>
                                            <div class="posted">
                                                <span class="posted__date"><i class="icon-clock-1"></i> {{ news.date }}</span>
                                                <ul class="posted__icon">
                                                    <li>
                                                        <span>
                                                        <i class="icon-comment-empty"></i>29
                                                    </span>
                                                    </li>
                                                    <li>
                                                        <span>
                                                        <i class="icon-eye"></i>2.3k
                                                    </span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                {% include 'mainApp/inc-news_block-sm3.html' %}
                            {% endif %}

                        {% endfor %}


                    </div>
                </div>
                <!-- Btn load-->

                <div class="ajax_load">
                    <i class="icon-arrows-cw"></i>Load more
                    <svg width="128" height="40" viewBox="0 0 128 40" xmlns="http://www.w3.org/2000/svg">
                        <rect x='0' y='0' fill='none' width='128' height='40'></rect>
                    </svg>
                </div>
                <!-- END Btn load-->
            </div>
            <!-- /Container-->
        </section>


Вот inc-news_block-sm3.html:

<div class="col-sm-3">
    <div class="thumbnail thumbnail_small">
        <a href="{% url 'mainApp:detail_news' news.id %}" class="thumbnail__link">
            <img src="{{ news.image.url }}" height="153" width="270" alt="News">
        </a>
        <div class="caption thumbnail__caption">
            <div class="news caption__news">
                <p class="news__category yellow-line">{{ news.category }}</p>
                <a href="{% url 'mainApp:detail_news' news.id %}" class="news__link">
                    <p class="news__text">{{ news.title | truncatechars:63}}</p>
                </a>
            </div>
            <div class="posted">
                <span class="posted__date"><i class="icon-clock-1"></i>{{ news.date }}</span>
                <ul class="posted__icon">
                    <li>
                        <span>
                            <i class="icon-comment-empty"></i>11
                        </span>
                    </li>
                    <li>
                        <span>
                            <i class="icon-eye"></i>1.1k
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


Что нужно: чтобы при нажатии на Load More, Ajax-ом докидывалось ещё 4 элемента.

Вот набросок функции, обрабатывающей аякс запрос:
View.py
def more_news(request):
    tmp = IndexView.count_news
    if request.is_ajax():
        objects = News.objects.order_by('-date')[tmp:tmp + 4]
        html = loader.render_to_string('mainApp/inc-news_block-sm3.html', {'news': objects}, request=request)
        data = {'errors': False, 'html': html}
        try:
            tmp += 4
            return JsonResponse(data)
        except News.DoesNotExist:
            return JsonResponse({'errors': 'Something happened'})
    raise Http404


Я понимаю принципы взаимодействия аякса с вьюхами (более\менее), но не могу понять логику конкретной ситуации. Я вижу два решения:
1. Перегружать всю секцию с удлиненным набором объектов
2. Дорисовывать еще 4-8 объектов.

По первому подходу есть один вопрос: правильно ли это? Логически - нет. Load more жеж, а не рефреш.

По второму подходу есть больше вопросов:
- Получается, нужно делать несколько, дополнительных, невидимых row, которые будем отрисовывать? Или как-то можно их сгенерировать в нужном месте?
- Как хранить текущее количество загруженных объектов? Во вьюхе попытался реализовать, но, чувствую, не сработает.
- В 5 строке view.py использую loader. И тут проблема: так как мне надо отдельно отрисовывать первый объект, то дополнительный шаблон начинает работать со второго объекта и передавать в него все объекты не получится, т.к. цикл инициализируется в другом месте, а туда передается по 1 объекту. Чтобы передать все объекты в этот шаблон, нужно цикл туда интегрировать, но как тогда быть с первым элементом? Вложенный цикл с if-ом, который проигнорирует первый круг? Так будет правильно?

В общем, пожалуйста, помогите решить эти вопросы.
  • Вопрос задан
  • 195 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы