在 railscast 114 之后实施“无尽页面”Javascript答案

【问题标题】：Implementing 'Endless Page' Javascript following railscast 114在 railscast 114 之后实施“无尽页面”Javascript
【发布时间】：2014-02-08 23:07:01
【问题描述】：

我在 rails 教程之后设置了一个简单的 Twitter 模型，我正在尝试添加 Endless Page 如下：http://railscasts.com/episodes/114-endless-page

Ryan 使用了产品页面和索引。但是，我有一个新闻源，因此需要替换某些变量。

我已经用@feed_items 替换了@products，但没有运气。实现起来似乎很简单，所以我不确定自己做错了什么。

代码对比：

这是我的页面控制器，它将是 Ryan 的产品控制器

class PagesController < ApplicationController

  def home
    @title = "Home"
    if signed_in?
      @micropost = Micropost.new
      @feed_items = current_user.feed.paginate(:page => params[:page])
    end
  end

瑞恩的密码：

def index
  @products = Product.paginate(:page => params[:page], :per_page => 15)
end

我的 index.js.rjs（问题可能出在这里？）

page.insert_html :bottom, :feed_item, :partial => @feed_items
if @feed_items.total_pages > @feed_items.current_page
  page.call 'checkScroll'
else
  page[:loading].hide
end

瑞恩的密码

page.insert_html :bottom, :products, :partial => @products
if @products.total_pages > @products.current_page
   page.call 'checkScroll'
else
   page[:loading].hide
end

Application_helper.rb（与 Ryan 的相同）

def javascript(*args)
  content_for(:head) { javascript_include_tag(*args) }
end

_feed.html.erb

<% unless @feed_items.empty? %>
<% javascript :defaults, 'endless_page' %>
  <table class="microposts" summary="User microposts">
    <%= render :partial => 'shared/feed_item', :collection => @feed_items %>
  </table>
<% end %>
<p id="loading">Loading more page results...</p>

Ryan 的 index.html.erb

<% title "Products" %>
<% javascript :defaults, 'endless_page' %>

<div id="products">
  <%= render :partial => @products %>
</div>
<p id="loading">Loading more page results...</p>

endless_page.js [与 Ryan 的相同]（问题可能在于 /products.js 行。我尝试更改为 feed.js 但没有运气）。

var currentPage = 1;

function checkScroll() {
  if (nearBottomOfPage()) {
    currentPage++;
    new Ajax.Request('/products.js?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
  } else {
    setTimeout("checkScroll()", 250);
  }
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 150;
}

function scrollDistanceFromBottom(argument) {
  return pageHeight() - (window.pageYOffset + self.innerHeight);
}

function pageHeight() {
  return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}

document.observe('dom:loaded', checkScroll);

【问题讨论】：

标签： javascript ruby-on-rails pagination

【解决方案1】：

我对 Rails 很陌生，并试图做类似的事情。但是您的 GET 请求肯定需要转到您的控制器而不是教程中的控制器。也许您还需要在控制器中渲染 .js 格式？

我想我们会改用 jquery，但我今天也会试试这个，如果我发现任何东西，我会更新你。

---更新。我试过了，效果很好。我认为本教程将路线设置为资源。那可能是你卡住的地方。希望对你有效。

【讨论】：