又是一页无休止的困境

Yet another endless page dilemma

本文关键字：困境 无休止 一页      更新时间：2023-09-26

我正在尝试为我的页面实现无休止的页面设置。两天来，我一直在尝试许多不同的方法，但似乎无法使其正常工作。我喜欢这篇博文中建议的设置，但我似乎无法让它工作：http://pedromtavares.wordpress.com/2011/05/08/endless-page-scrolling-with-rails-3-and-jquery/

我也尝试了瑞安贝茨截屏视频，但没有设法实现它......

我尝试了以下方法：

已安装的插件

rails plugin install git://github.com/pedromtavares/endless_scroll_example.git

修改了我的控制器主页：

def index
last = params[:last].blank? ? Time.now + 1.second : Time.parse(params[:last])
@feeds = Feed.input(last)
end

使用新方法"输入"修改了我的"饲料模型"：

def self.input(last)
   self.where("created_at < ? ", last).order('created_at desc').limit(5)
end

修改了我的索引

<% content_for :scripts do %>
  <%= javascript_include_tag 'endless' %>
<% end %>

<%unless @feeds.blank?%>
<ul class='list' last="<%=@feeds.to_a.last.created_at%>">
<%= render :partial => 'feeds', :collection => @feeds%>
<div id='infinite-scroll'></div>
</ul>
<%end%>

我的部分 _feeds.html.erb 看起来像这样（只是填写文本:)：

<%=feeds.title%>
jfjh
</p>
<p>
    jfjh
    </p>
    <p>
        jfjh
        </p>
        <p>
            jfjh
            </p>
            <p>
                jfjh
                </p>
                 <br>
<hr>

添加了我的新JavaScript（无尽.js），由pedromtavares提供

$('ul').endlessScroll({
  fireOnce: true,
  fireDelay: 500,
    ceaseFire: function(){
      return $('#infinite-scroll').length ? false : true;
    },
    callback: function(){
      $.ajax({
          url: '/home',
          data: {
              last: $(this).attr('last')
          },
          dataType: 'script'
        });
    }
});

我的最终javascript文件看起来像这样：

<% unless @feeds.blank? %>
    $('.endless_scroll_inner_wrap').append("<%=escape_javascript(render :partial => 'feeds', :collection => @feeds)%>");
    $('ul').attr('last', '<%=@feeds.to_a.last.created_at%>')
<% else %>
    $('#infinite-scroll').detach();
<% end %>

我没有收到任何错误，但也没有无限滚动。我从数组中得到第一篇文章，但其余的没有。无法弄清楚我做错了什么，感觉我已经尝试了一切......请帮忙！

我自己也有类似的问题。 我的问题是我的 javascript 中的追加找不到正确的div。 可能适合你 -

在 JavaScript 文件中，更改：

    $('.endless_scroll_inner_wrap').append...

自： 

    $('#infinite-scroll').append...

看看这是否能解决它。

相关文章：