will_paginate mit endlosem Scrollen | Rails4

Question

DIES IST DIE LÖSUNG

So verwende ich will_paginate/Bootstrap Will Paginate mit Endless Scrolling.

die Paginierung Funktion erhalten:

1.) In meinem Controller-i mit

meine Index Aktion aktualisiert

@clips = Clip.order("created_at desc").page(params[:page]).per_page(20) 

2.) verändern Meine Indexansicht:

<%= will_paginate @clips%> 

FERTIG

Seitenumbruch funktioniert gut.

To Add Endless scrolling Ich habe die gleichen Schritte wie in meiner vorherigen Rails 3 App.

1.) bearbeiten meine clips.js.coffee

jQuery -> 
$('#clips-masonry').imagesLoaded -> 
    $('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry 

if $('.pagination').length # Thats for the Endless Scrolling 
    $(window).scroll -> 
     url = $('.pagination .next_page a').attr('href') 
     if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50 
      # What to do at the bottom of the page 
      $('.pagination').text("Fetching more Clips...") 
      $.getScript(url) 
     $(window).scroll() 

2.) Eine index.js.erb mit:

$boxes = $('<%= j render(@clips) %>') 

$('#clips-masonry').append($boxes).imagesLoaded(function(){ 
    $('#clips-masonry').masonry('reload'); 
}); 
<% if @clips.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate(@clips) %>'); 
<% else %> 
    $('.pagination').remove(); 
<% end %> 

3.) Zu meiner Controller-Index-Aktion format.js hinzugefügt

def index 
    @clips = Clip.order("created_at desc").page(params[:page]).per_page(12) 
    respond_to do |format| 
     format.html 
     format.js 
    end 
end 

4.) Mein _clip.html.erb mit dem div gewickelt ist

<div class="clip-box clips-masonry" data-no-turbolink> 

Answer 1

Ok, ich habe es mit meiner aktualisiert Frage arbeiten, jeder, der auf dieses Problem stolpert, Dies ist die Lösung.