在Rails 4中遇到无尽滚动问题

时间:2013-09-21 20:12:38

标签: javascript jquery ruby-on-rails ruby pagination

嘿我正在尝试添加无限滚动到rails应用程序...我按照ryan bates的教程,但我仍然有一些麻烦得到下一页内容加载。

所以你得到一个关于我使用的结构的线索...我有一个名为Static Pages的控制器,它主要有静态页面和一些其他非静态页面......其中一个页面被称为'feed'所以在static_pages中我有一个feed.html.erb

这是一个显示用户更新的供稿页面

这是控制器(static_pages)

def feed
  if signed_in?
    @update = current_user.updates.build
    @feed_items = current_user.feed.page(params[:page]).per_page(5)
  else
    flash[:error] = "Please sign in."
    redirect_to login_url
  end

  respond_to do |format|
    format.js
    format.html
  end
end

这是feed html视图

<div class="row">
  <div class="span8 offset2 settings update">
    <div id="feeds">
  <%= render partial: "shared/feed_item", collection: @feed_items %>
</div>
    <%= will_paginate @feed_items %>
  </div> 
</div>

这是我的static_pages.js.coffee(来自ryan bates)

jQuery ->
  if $('.pagination').length
  $(window).scroll ->
    url = $('.pagination .next_page a').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').text("Fetching more products...")
      $.getScript(url)
  $(window).scroll()

最后这是我的feed.js.erb(在static_pages视图文件夹中)

$('#feeds').append("<%= render partial: 'shared/feed_item', collection: @feed_items %>");
  <% if @feed_items.current_page < @feed_items.num_pages %>
  $('.pagination').replaceWith('<%= will_paginate(@feed_items) %>');
<% else %>
  $('.pagination').remove();
<% end %>

有没有人想要刺痛并试图弄清楚这里发生了什么?我确信这是一件容易让我看不到的东西。 (顺便说一句,在我开始无休止的滚动之前,分页很有效)

当我尝试访问Feed页面并滚动到底部时,会显示文本(获取更多产品),但新的feed_items不会。

编辑trueunlessfalse

Static_pages coffeescript

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page a').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 5
        $('.pagination').text("Hello world!")
        $.getScript(url)
    $(window).scroll()

feed.html.erb

<div class="row">
  <div class="span8 offset2 settings update">
    <div id="feeds" data-no-turbolink>
  <%= render partial: "shared/feed_item", collection: @feed_items %>
    </div>
    <%= will_paginate @feed_items %>
  </div>
</div>

feed.js.erb

$('#feeds').append("<%= j render partial: 'shared/feed_item', collection: @feed_items %>");
  <% if @feed_items.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@feed_items) %>');
  <% else %>
    $('.pagination').remove();
  <% end %>

0 个答案:

没有答案