Implementacja niekończącego się przewijania za pomocą Rails 3 i Jquery

Question

Próbuję wdrożyć nieskończony zwój w moim projekcie. Używam mieszanki Railscast #114 Endless Page i this.

Wszystko działa dobrze poza dziwnym zachowaniem, gdy próbuję przestać wysyłać żądania, gdy strona dobiegnie końca.

Do tej pory mam:

Kontroler:

def show 
    @title = Photoset.find(params[:id]).name 
    @photos = Photoset.find(params[:id]).photo.paginate(:page => params[:page], :per_page => 20) 
    respond_to do |format| 
     format.js 
     format.html 
    end 
end 

Show.html.erb:

<% content_for :body_class, '' %> 
<%= render 'shared/header' %> 
<div id="photos_container"> 
    <div id="photos_header"> 
    <h2><%= @title %></h2> 
    </div> 
    <%= render :partial => 'photo', :collection => @photos %> 
</div> 
<%= render :partial => 'endless_scroll' %> 

Javascript (ładowany poprzez częściowe):

<script type="text/javascript"> 
(function() { 
    var page = 1, 
    loading = false, 
    finish = false; 

    function nearBottomOfPage() { 
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200; 
    } 

    function finish() { 
    finish = true; 
    } 

    $(window).scroll(function(){ 
    if (loading) { 
     return; 
    } 

    if(nearBottomOfPage() && !finish) { 
     loading=true; 
     page++; 
     $.ajax({ 
     url: '/photosets/<%= params[:id] %>?page=' + page, 
     type: 'get', 
     dataType: 'script', 
     success: function() { 
      loading=false; 
     } 
     }); 
    } 
    }); 
}()); 
</script> 

pokaz .js.erb

$("#photos_container").append("<%= escape_javascript(render :partial => 'photo', :collection => @photos) %>"); 
<% if @photos.total_pages == params[:page].to_i() %> 
    page.call 'finish' 
<% end %> 

Jak widać, w moim show.js.erb Mam page.call przypisujący prawda do zmiennej finish. To zatrzymuje żądania.

Przewodową rzeczą jest to, że nigdy nie ładuje ostatniej strony. Gdy @photos.total_pages == params[:page].to_i() zamiast po prostu wywoływać funkcję finish i ustawiać zmienną na true, to również uniemożliwia uruchomienie $("#photos_container").append("<%= escape_javascript(render :partial => 'photo', :collection => @photos) %>");.

Wysyła żądanie do kontrolera, uruchamia SQL, ale nie dołącza do ostatniej strony.

Po zmianie warunku na @photos.total_pages < params[:page].to_i() działa, ale wysyła dodatkowe żądanie do strony, która nie istnieje.

Doceniam każdą pomoc dotyczącą mojej implementacji. Nie jestem pewien, czy istnieje odpowiednia metoda (Rails), aby to osiągnąć.

Answer 1

Przede wszystkim można renderowania HTML z częściowym gdy wniosek jest typ XHR:

def show 
    photoset = Photoset.includes(:photos).find(params[:id]) 
    @title = photoset.name 
    @photos = photoset.photo.paginate(:page => params[:page], :per_page => 20) 
    if request.xhr? 
    render '_photo', :layout => false 
    end 
end 

Następnie użyj wywołanie ajax:

$.ajax({ 
    url: '/photosets/<%= params[:id] %>?page=' + page, 
    type: 'get', 
    dataType: 'script', 
    success: function(response) { 
    $("#photos_container").append(response); 
    if (response == "") { 
     //stop calling endless scroll 
    } 
    }); 
});