Wakotech Blog

ポエム

kaminariを使ってajax通信でページ送りを実装しました

去年から作っているWakotsu Animation(http://wakolab.info/an/)ですが、先日Gehirn RS2に移行したのに伴いデータを移行しました。
以前はそのまんまScaffoldみたいな見た目だったので、項目が増えても縦に伸びるだけだったのですが、現在のデザインだと下に伸びすぎるので、ページ送りを導入することにしました。
indexページでページ送りするのでできれば画面を切り替えないでページ送りしようと思っていたところ、kaminariを使えば簡単にできるとのこと(だいたいhttp://qiita.com/nysalor/items/77b9d6bc5baa41ea01f3を参考にしてやりました)。

まず元のindexページから、アイテムページを切り離します。
ページャーもページを送るたびに更新されなければならないので_item.html.erbに記入します。

_item.html.erb
<% @items.each do |item| %>
  <%= h(item.hoge) %>
  <%# 中略 %>
<% end %>
<%= paginate @items, :remote => true %>
index.html.erb
<div id="items">
  <%= render :partial => "items" %>
</div>

ページ送りする内容を返すjsコードをindex.js.erbに書きます。

index.js.erb
$("items").html("<%= j(render :partial => 'items') %>");

controllerのindexメソッドにjsでのリクエストに対し上記のindex.js.erbを返すようにします。
また、データの受け渡しをkaminari準拠のページ送り形式に書き換えます。

items_controller.rb#index
def index
  @items = Item.page(params[:page]).per(10)
  respond_to do |format|
    format.html
    format.js
  end
end

こんな感じで簡単にできてしまいました。今までなんでこけていたのだろうという感じです……。