Django でお手軽に Pjax
Django アプリで Pjax 導入した。必要なものは全て Github にあった。
Pjax については pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ こちらのエントリなどが詳しい。
ライブラリ
GitHub - defunkt/jquery-pjax: pushState + ajax = pjax
GitHub - jacobian/django-pjax: MOVED - see https://github.com/eventials/django-pjax
clone して適宜配置。
※ django-pjax は djpjax という名前にした（ハイフン入ると import error になる為）
※ clone した後、__init__.py 置かないと import時にモジュール発見されなくてハマった（Python慣れてない）
コントローラーのサンプル
views.py
from submodule.djpjax.djpjax import pjax from django.template.response import TemplateResponse @pjax() def pjax_get(request): ctxt = RequestContext(request, { "val1": "Pjax で取ってきたよ", }) return TemplateResponse(request, 'pjax/get.html', ctxt)
django-pjax は Django1.3 から導入されたテンプレートクラスである TemplateResponse をベースに利用しているようです。
リクエストメソッドに @pjax() デコレータを書くだけで、ヘッダ内に X_PJAX があるかをチェックし、レスポンス用のテンプレートを選択して返してくれます。
呼び出し側テンプレートのサンプル
pjax/index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/path/to/jquery.pjax.js" type="text/javascript"></script> <div> Pjaxテストページだよ </div> {# jQuery.pjax を使って aタグの動作を変更している #} <script> $(document).ready(function() { $("a.js-pjax").pjax("#main"); }); </script> {# data-pjaxアトリビュートでレスポンスを反映させるidを指定する #} <div style="margin:10px 0;"> <a href="/index/pjax_get/" data-pjax="main" class='js-pjax'>Pjaxで遷移する</a><br> </div> {# data-pjaxアトリビュートで指定したidが付与されたタグにレスポンスが反映される #} <div id="main"> {% if val1 %} {{ val1 }} {% else %} このテキストが変更されます {% endif %} </div>
