Question

我不确定我在这里缺少什么。我在页面上实现了无限滚动，但结果重复了不止一次。我为我的开发环境创建了一个按顺序生成的项目列表。它们在无限卷轴中重复，例如。项目编号49,48,47,46,45,44,46,45,44,46,45,44,43，......

index.js.erb的

   $('#my-posts').append('<%= j render @news %>');
   <% if @news.next_page %>
   $('.pagination').replaceWith('<%= j will_paginate @news %>');
    <% else %>
   $(window).off('scroll');
   $('.pagination').remove();
   <% end %>

index.html.erb

<section class='page-content-container'>
 <h2 class='static-page-subheading'>Stay Up to Date</h2>
  <%= render 'news' %>
   <div id="infinite-scrolling">
    <%= will_paginate @news%>
   </div>
 </section>

_news.html.erb

<div id='my-posts'>
 <% @news.each do |news| %>
  <div class='news-item-container'>
<h2><%= news.title %></h2>
    <h3><%= news.created_at %></h3>
<%= truncate(news.body, :length => 500, escape: false) %>
<%= link_to 'Read More', news %>
<div class="addthis_sharing_toolbox"></div>
   </div>
  <% end %>
  </div>

pagination.js.coffee （忽略缩进）

 jQuery ->
   if $('#infinite-scrolling').size() > 0
     $(window).on 'scroll', ->
       more_news_url = $('.pagination .next_page a').attr('href')

       if more_news_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
         $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
         $.getScript more_news_url
         return
       return

Answer 1

刚刚在本地复制它，我记得我以某种方式解决了这个问题，现在我记得了。这就是我所做的修复它：

index.html.erb

<%= render partial: "posts" %>
<div class="append-me"></div>

<%= will_paginate @posts, class: 'pagination pagination-sm' %>

index.js.erb的

$('.append-me').append( '<%= j render "posts" %>' );


<% if @posts.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate @posts, class: "pagination pagination-sm" %>');
<% else %>
    $('.pagination').remove();
<% end %>

_posts.html.erb

<% @posts.each do |post| %>
<div class="well" style="margin: 15% 0%;">
    <%= post.data %>
</div>

<% end %>

post.js

if ($('.pagination')) {
         $(window).scroll(function() {
            console.log("sdasd")
            url = $(' .next_page').attr('href');

            // console.log($(window).scrollTop())
            // console.log($(document).height())
            // console.log($(document).height() - $(window).height() - 50)
            if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {

                $('.pagination').text("Fetching more profiles...");
                $.getScript(url)
            }
            // $(window).scroll();
        });
    }

诀窍是，我必须明确在我的index.html和index.js文件中创建类“pagination”。其次，我为我的index.js.erb文件而不是<%= j render "posts" %>

执行了@posts

rails无限滚动重复内容

1 个答案: