導軌無限滾動重複內容

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 %> 

索引.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 %> 

後.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文件中創建類「分頁」。其次，我爲我的index.js.erb文件做了<%= j render "posts" %>而不是@posts