使用 Rails 3 和 Jquery 实现无限滚动答案

【问题标题】：Implementing a endless scroll with Rails 3 and Jquery使用 Rails 3 和 Jquery 实现无限滚动
【发布时间】：2011-11-30 15:41:18
【问题描述】：

我正在尝试在我的项目中实现无限滚动。我混合使用 Railscast #114 Endless Page 和 this。

当我尝试在页面结束时停止发送请求时，除了奇怪的行为之外，一切正常。

到目前为止我有：

控制器：

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

显示.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（通过部分加载）：

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

show.js.erb

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

如您所见，在我的 show.js.erb 上，我有一个 page.call 将 true 分配给 finish 变量。这会停止请求。

有线的事情是它永远不会加载最后一页。当@photos.total_pages == params[:page].to_i() 不只是调用finish 函数并将变量设置为true 时，它也会阻止$("#photos_container").append("<%= escape_javascript(render :partial => 'photo', :collection => @photos) %>"); 运行。

它将请求发送到控制器，运行 SQL 但不附加最后一页。

如果我将条件更改为@photos.total_pages < params[:page].to_i()，它会起作用，但会向不存在的页面发送额外的请求。

如果对我的实施有任何帮助，我将不胜感激。我不确定是否有更充分的（Rails）方法来完成此操作。

【问题讨论】：

我不了解 Rails，但通常 params[:page].to_i() 不是从零开始的索引吗？因此，如果 params[:page].to_i() 例如为 5，那么 photos.total_pages 将为 6（第 0-5 页）。
您检查了最后一页上的@photos 变量吗？我认为它没有附加任何内容，因为最后一页上的集合是空的。 finish 变量也没有被您粘贴的任何代码使用，但我认为这不相关。
在您的 ajax 调用中，您有成功方法，您只需将加载设置为 false。响应去哪儿了？如果它没有被注入到 DOM 中，那么变量将不会被改变。

标签： ruby-on-rails jquery ruby-on-rails-3.1 infinite-scroll

【解决方案1】：

首先，当请求是 xhr 类型时，您可以从部分渲染 html：

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

然后使用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
    }
  });  
});

【讨论】：