Skip to content

Instantly share code, notes, and snippets.

@mori-dev
Created June 9, 2012 11:10
Show Gist options
  • Save mori-dev/2900588 to your computer and use it in GitHub Desktop.
Save mori-dev/2900588 to your computer and use it in GitHub Desktop.
kaminari gem で twitter 風の AutoPagerize が簡単に実現できるのか調べた

kaminari gem で twitter 風の AutoPagerize が簡単に実現できるのか調べた

  • ウィンドウ下部までスクロールしたら発火するイベントをつくる。ただし、今回の例では何度も発火していることがある。そのイベントで何をするかが腕のみせどころ。
  • link_to_next_page に次へのポインタ的な情報をセットして、コンテンツを更新したらこれも更新
  • $('#next_link').trigger("click"); するより $.ajax の方が HTML を組み立てやすい気がするが success でとれる情報の操作がいる。そのままだと layout 外しても豪快にとれる。
  • $(window) などの window を任意のエレメントにできるようにした方がよい

アクション

  def index
    @users = User.page(params[:page]).per(50)
  end

ビュー

<h1>ユーザ一覧</h1>
<ul>
  <div id="contents">
    <%= render @users %>
  </div>
</ul>

<div id="next">
  <%= link_to_next_page @users, '次へ', :remote => true, :id => 'next_link'  %>
</div>

_user.html.erb

<li><%= user.name %></li>

index.js.erb

var prev = $('#contents').html();

$('#contents').html(prev + '<%= escape_javascript render(@users) %>');

$('#next').html(
  '<%= escape_javascript(link_to_next_page(@users, '次へ', :remote => true, :id => "next_link").to_s) %>'
);

JS

$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
     $('#next_link').trigger("click");
   }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment