CoffeeScriptでPjax使ってみた

CoffeeScript HTML5

・Pjax?

pjaxっていうのは、Ajax＋(pushState, popState)ですね。
Ajaxでコンテンツを差し替えつつ、URLを動的に変更します。
んでさらに、Ajaxで差し替えてるのに「戻る」、「次へ」ボタンも使えるようになります。
要は履歴を書き変えているらしい、、、、、。（ちゃんと調べておこう）


・ pushState, popState

HTML5で導入されたURL,履歴操作ができるAPIだそうです。


・使用例

有名なところで行くとgithubがまさにそれらしい。
githubはjquery-pjaxっていうjQueryのプラグインを使用してるらしいです。

・jquery-pjax


ちょうど使えそうな機会があったので、じゃあ触ってみようと思い、
それならCofeeScriptに決まってんだろってことで使ってみました(理由になってないですね)。
なお、今回はプラグインは使いません。

・pushState
window.history.pushState("", "", URL)

簡単。
基本的にはこれで使える。
第１引数はstateのオブジェクトが入るらしい。popStateの時に引っぱり出されるらしいが詳しいことは割愛。
第２引数はまだ未完成らしく、空でOK、
第３引数は変更したいURL

・popState
$(window).bind "popState", ->
  // contens

こっちも簡単。
popStateイベントをbindするだけ。
「戻る」、「次へ」ボタンで呼び出されます。


・実際使ってみた
// ブラウザが対応してるかチェック
if window.history and window.history.pushState
  $(a Elements).live "click", ->
    window.history.pushState("", "", this.href)
    // $.ajax
    //   url: this.href
    //   ￤
       return false
  $(window).bind "popstate", ->
    // $.ajax
    //   url: location.href
    //   ￤
       return false

pushStateもpopStateも履歴を書き変えるだけなので、
あとはそれに応じてajaxでコンテンツを差し替えれば良い感じなのか、、、。
難しい。

nayamagu