由于 javascript 调用，无限滚动工作但未填充所有数据

Question

我想在我的网站上显示用户评分 - 为此我使用了无限滚动，但我遇到了一个问题。

当它在调用 <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> 之前首次加载数据时，它会显示带有投票计数的星星，但是在调用 <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> 之后它不会显示星星。

我的views.py

@login_required
def ratings_user(request,pk):
    ratings = VoteUser.objects.filter(the_user_id=pk).order_by('-pk')
    paginator = Paginator(ratings, 1)
    page = request.GET.get('page')
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:

        posts = paginator.page(paginator.num_pages)
    return render(request,request.session['is_mobile']+'profile/ratings.html',{'ratings':posts})

html

{% extends 'mobile/profile/base.html' %}
{% block title %}
Ratings
{% endblock %}

{% block leftcontent %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block middlecontent %}
 <div class="infinite-container">

{% for i in ratings %}
 <div class="infinite-item">
     
<div class="w3-container w3-card w3-white w3-round w3-margin">
    <img src="{{ i.the_user.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:40px;height:40px;border-radius:50%;">

        <a href ="{% url 'profile' i.the_user_id %}" style="color:black;">{% with user=i.the_user.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
        <br>

       <span class="stars" data-rating="{{ i.vote.vote }}" data-num-stars="5" ></span>
        <hr class="w3-clear">
        <p>
        {{ i.commentaire|linebreaksbr }}
        </p>
        <span class="glyphicon glyphicon-user"></span> <a href ="{% url 'profile' i.the_sender_id %}">{% with user=i.the_sender.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
</div>
</div>
{% endfor %}
</div>
   {% if ratings.has_next %}
    <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a>
  {% endif %}
{% endblock %}
{% block rightcontent %}

{% endblock %}
{% block js %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>
<script>
//ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
</script>
<script>
            $(function(){
                $('.stars').stars();
            });
        </script>
{% endblock %}

我试过将 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> 放在 class="infinite-item" 中，但 help.what 不是这样的原因吗？谢谢。

从昨天开始我就在这个问题上尝试了一切。

这是另一位试图在这里帮助我的用户，但我不是很明白你能不能用一些代码帮助我理解它。

这是他的回答：

It doesn't look like .stars() will look for new elements being added to the DOM. You should look for a callback function configuration option within Waypoint.Infinite that you can call .stars() on the new elements.

Answer 1

假设您正在使用航路点的 Infinite Scroll，您可以使用 onAfterPageLoad 回调

onAfterPageLoad

Default: $.noop.

Parameters: $items.

This is a callback that will fire at the end of the request cycle, after new items have been appended to the container. It is passed one parameter, which is a jQuery object of all the items that were appended during the page load.

请注意，尽管使用 $name 的 jquery 约定表示一个 jquery 对象并声明 是一个 jquery 对象 ，在这种情况下，反复试验表明 $items 是 DOM 元素，而不是 jquery 对象。

文档中没有提供示例，所以它可能看起来像：

  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onAfterPageLoad: function(items) {
          $(items).find(".stars").stars();
      } 
    });
  </script>

由于 javascript 调用，无限滚动工作但未填充所有数据

infinite scroll working but not populating all data because of javascript call

javascript

jquery

django

django-templates

infinite-scroll