0

我最近实现了无休止的页面滚动，如博客文章中所示。总之，我在一个页面上显示 10 个帖子，当用户到达页面底部时，应用程序会触发一个对 index 操作的“获取”请求，加载 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当用户向下滚动时仍会调用原始内容，这会附加索引操作中的帖子。

有更好的实现吗？

4

2 回答 2

0

听起来最好的方法是实现该 posts_tagged_with 操作，以便您可以像往常一样跟踪选择了哪些标签和使用这些标签（使用追加）的无尽滚动。Then when another tag is selected you can replace the contents with the new collection using jquery's html method.

于 2013-11-11T23:18:29.060 回答
0

在 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] %>');
于 2013-11-11T23:12:16.437 回答