Question

我最近实现了无尽的页面滚动，如blog post中所示。总之，我在页面上显示10个帖子，当用户到达页面底部时，应用程序向索引操作发出“获取”请求，再加载10个帖子并使用jquery将它们附加到页面。

这是我的实施：

post_controller

def index
if params[:tags]
  @posts = Post.tagged_with(params[:tags]).paginate(:page => params[:page], :per_page => 10)
else
  @posts = Post.paginate(:page => params[:page], :per_page => 10)
end

respond_to do |format|
  format.html
  format.js { render 'index.js.erb'}
end
end

index.js.erb的

$('#posts').append('<%= escape_javascript(render @posts) %>');
$('a.load-more-posts').attr('href', '<%= posts_path page: @posts.next_page %>');

<% unless @posts.next_page %>
  $('a.load-more-posts').remove();
<% end %>

当我尝试按标记过滤帖子时，我遇到了一些问题。根本问题是当用户手动点击标签以查看带有该标签的帖子以及无限滚动功能时，会触发相同的index.js.erb文件。

当点击新标签时，而不是仅将帖子附加到现有html上，首先应清除显示的帖子，然后追加新帖子。

从那时起，我似乎应该将索引操作和单独的posts_tagged_with操作分开。这个动作将有自己的js文件非常相似，但它将取代html而不是追加。

问题在于，当用户向下滚动时仍然会调用原始index.js.erb，这会从索引操作中追加帖子。

对此有更好的实施吗？

Answer 1

在index.js.erb中，您可以更改前两行：

    $('#posts').<%= params[:tags] && params[:page].nil? ? "html" : "append" %>('<%= escape_javascript(render @posts) %>');
    $('a.load-more-posts').attr('href', '<%= posts_path page: @posts.next_page, tags: params[:tags] %>');

Answer 2

听起来最好的方法是实现posts_tagged_with操作，以便您可以跟踪选择哪些标记，并像往常一样（使用追加）跟踪这些标记。然后，当选择另一个标签时，您可以使用jquery的html方法将内容替换为新集合。

jquery和控制器问题无休止的页面滚动

2 个答案: