Доброго времени суток.
Что есть: страничка, на которой выгружаются объекты, вот её фрагмент (привожу секцию для удобства):
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-ом, который проигнорирует первый круг? Так будет правильно?
В общем, пожалуйста, помогите решить эти вопросы.