django - Waypoint Infinite Scroll 的 Wagtail 分页问题
问题描述
我已经在艺术画廊项目的常规页面模型上实现了Waypoint Infinite Scroll 。这些物品可以通过复选框添加到商店。然后,我使用商店页面过滤标记为特价的画廊项目。出于某种原因,当无限滚动功能似乎在商店页面上触发得很好但没有呈现新项目时。
我从服务器收到 200 响应,并且没有错误记录到控制台:
[12/Dec/2020 11:40:46] "GET /shop/?page=2 HTTP/1.1" 200 26
它使用的页面:
class Gallery(Page):
intro = RichTextField(blank=True, help_text="Text for the top of your gallery page. (Optional - recommended to leave empty for a more simplistic look.)")
content_panels = Page.content_panels + [FieldPanel('intro', classname="full")]
subpage_types = ['InstallationPage']
# parent_page_types = []
def get_context(self, request):
context = super().get_context(request)
filtered_medium = request.GET.get('medium', None)
if filtered_medium:
context['filtered'] = True
mediums = InstallationMedium.objects.filter(name=filtered_medium)
installations = InstallationPage.objects.child_of(self).order_by('-date').live().filter(mediums__in=mediums)
else:
mediums = InstallationMedium.objects.filter(installationpage__in=InstallationPage.objects.all()).distinct()
installations = InstallationPage.objects.child_of(self).order_by('-date').live()
paginator = Paginator(installations, 12)
page = request.GET.get('page')
try:
pagin = paginator.get_page(page)
except PageNotAnInteger:
pagin = paginator.get_page(1)
context['installations'] = pagin
context['mediums'] = mediums
return context
无法使用的商店页面:
class Shop(RoutablePageMixin, Page):
ajax_template = "shop/shop_item_ajax.html"
def get_context(self, request):
context = super().get_context(request)
shop_items = GalleryItem.objects.filter(Q(direct_sale=True) | Q(external_sale=True)).order_by('latest_revision_created_at')
paginator = Paginator(shop_items, 12)
page = request.GET.get('page')
try:
items = paginator.get_page(page)
except PageNotAnInteger:
items = paginator.get_page(1)
context['shop_items'] = items # shop_items for all items
for item in items:
print(item)
return context
主.js:
document.addEventListener('DOMContentLoaded', function() {
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loader').removeClass('d-none')
},
onAfterPageLoad: function ($items) {
$('.loader').addClass('d-none')
}
});
...
商店.html:
<div class="row justify-content-center justify-content-md-start infinite-container">
{% for item in shop_items %}
<div class="col-12 col-sm-6 col-md-4 col-xl-3 infinite-item">
<div class="row">
<div class="col d-flex justify-content-center text-center">
<h4><a href="/shop/{{ item.slug }}/">{{ item.title }}</a></h4>
</div>
</div>
</div>
{% empty %}
Nothing for now!
{% endfor %}
</div>
<div class="row justify-content-center">
<div class="loader d-none">
<div class="loader-inner ball-pulse" id="dropin-loading">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
{% if shop_items.has_next %}
<div class="row justify-content-center">
<a class="infinite-more-link" href="/shop/?page={{ shop_items.next_page_number }}">More</a>
</div>
{% endif %}
基本的分页也可以正常工作。如果我单击超链接,它将加载第 2 页。
解决方案
我的问题当然很简单。在Shop
课堂上我添加了这一行
ajax_template = "shop/shop_item_ajax.html"
从之前对 ajax 功能的深入研究中,该模板是一个我从未使用过的空文件,因此没有呈现任何内容。我删除了那条线,Waypoint Infinite 像宣传的那样工作。
推荐阅读
- java - 定义一个与其所在的类同名的枚举
- python - 解析值具有“&”的查询字符串
- ios - 在 Firebase iOS 中刷新身份验证令牌时出错
- c# - 当我触发插入查询时,抛出异常:System.Data.dll 中的“System.Data.SqlClient.SqlException”
- performance - 当它说 L1 缓存参考或主内存参考时是什么参考
- jquery - jQuery替换元素中的字符串会破坏内容
- assembly - MIPS跳转指令编码:为什么要左移,为什么要保留PC的高4位?
- android-studio - 在 Android Studio 的 ViewPager 中打开一个新片段
- javascript - 将数据库记录建模为 javascript 类对象的最佳实践是什么?
- c# - Assembly.LoadFile 在同一个程序集上引发程序集解析事件