javascript - 在railscast 114之后实现 'Endless Page' Javascript

Question

我按照 Rails 教程设置了一个简单的 Twitter 模型，并尝试添加以下无尽页面:http://railscasts.com/episodes/114-endless-page

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

我已将@products 替换为@feed_items，但没有成功。它看起来很容易实现，所以我不确定我做错了什么。

代码比较:

这是我的页面 Controller ，它将是 Ryan 的产品 Controller

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>

瑞安的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);

Answer 1

我对 Rails 还很陌生，正在尝试做类似的事情。但是您的 GET 请求肯定需要发送到您的 Controller 而不是教程中的 Controller 。也许您还需要在 Controller 中渲染 .js 格式？

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

---更新。我尝试过这个，效果很好。我认为教程已将路线设置为资源。那可能就是你被困住的地方。希望对你有帮助。