infinite scroll実装メモ２

[環境]
ruby 2.1.0p0
Rails 4.0.2
jquery使用
kaminari使用
bootstrap使用
turbolinks使用
jquery-turbolinksも使用

前に、次のページの情報をjsonで取得してきて、次のページ読み込むまでのスクロール高さも計算して…ってややこしい方法でやってましたが、アホみたいに簡単なやりかた見つけたのでメモ…

[そもそもjsonで返す必要なかった]
dataTypeに"html"を指定してもiTemSelectorで指定した要素を抜き出して表示してくれる模様。html全部取ってきて埋め込まれるものとばかり思っていたのでhtml使う選択肢が頭になかった。あたまいたい。

前回と同じように実装する場合は以下のようにすれば実装可能

talk.html.erb

    <div id="talks">
      <% @talks.each do |talk| %>
        <%= render talk %>
      <% end %>
      <div class="navigation">
        <%= link_to "next page?", talks_path(:page => 2), :class => "hidden" %>
      </div>
    </div>

talk.css.scss

  #talks{
    max-height:お好きなpx;
    overflow-y:scroll;
  }

talk.js

var clo_InfiniteScrollTalk = function(){
  $(function(){
    if($("#talks").length == 0){
      return;
    }

    $("#talks").infinitescroll({
        debug : true,
        loading:{
          finishedMsg: "last comment."
        },
        contentSelector : "#talks",
        itemSelector : "#talks > .comment-line-box",
        navSelector  : "#talks > .navigation",
        nextSelector : "#talks > .navigation > a",
        dataType: "html",
        binder: $("#talks"),
        behavior: "local",//binderに$(window)以外を指定する場合これを指定する。
                          //更に、local.jsをjquery.infinitescroll.min.jsの後に読み込んでおくこと。
                          //公式から落としてきたinfinite-scroll-master/behaviorsフォルダにソースがある。
        bufferPx: 40,
        pixelsFromNavToBottom: 0,
        errorCallback: function(){
          //適宜処理
        }
    });
  });
}();

ちなみに、binderオプションは標準では$(window)となるようで、これがturbolinkと相性が最悪で、ページを読み込む度にイベントが生成されてしまう模様。
標準のオプションで実装する場合はイベントの重複を回避するために、

$(function(){
  $(window).off("smartscroll");
});

をinfinite scroll生成より先に呼び出せば正常に動くっぽい。
とてつもなくスッキリした…レスポンシブデザインでも全然問題ないし、俺はここ数日いったい何をやっていたのか…OTL