Djangoでpjaxするdjango-pjaxを試してみた

django pjax

djangoでpjaxをするのにdjango-pjaxというライブラリがあるので試してみました。

django-pjax
https://github.com/jacobian/django-pjax


jquery-pjax
https://github.com/defunkt/jquery-pjax

インストール

pip install django-pjax


jquery-pjaxはダウンロードして適当な場所に配置


とりあえず動かしてみるまでの実装

適当にdjangoのプロジェクトを作ります。


views.py

from django.template.response import TemplateResponse
from djpjax import pjax

@pjax()
def index(request):
    return TemplateResponse(request, 'app/index.html', {})


@pjax()
def about(request):
    return TemplateResponse(request, 'app/about.html', {})


@pjax()
def contact(request):
    return TemplateResponse(request, 'app/contact.html', {})

views関数はpjaxデコレータとTemplateResponseを使うってところがポイントです。


pjaxデコレータは、requestヘッダーににHTTP_X_PJAXがセットされていた場合、TemplateResponseにセットされているテンプレート名称を"-pjax"をつけたものに変更します。
なので、上記のviews.pyだとテンプレートは6つ用意する必要があります。

app/index.html
app/index-pjax.html
app/about.html
app/about-pjax.html
app/contact.html
app/contact-pjax.html


あとはテンプレートのリンクとjsですが、こんな感じになります

<ul>
  <li><a href="/" data-pjax='#main'>Home</a></li>
  <li><a href="/about" data-pjax='#main'>About</a></li>
  <li><a href="/contact" data-pjax='#main'>Contact</a></li>
</ul>

<div id="main">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/static/extras/jquery-pjax/jquery.pjax.js"></script>

<script type="text/javascript">
    $(function(){
        $('a[data-pjax]').pjax();
    });
</script>


これだけで、pjaxができるようになります。

サンプルはこちらにアップしました
http://djangopjax.herokuapp.com/
https://github.com/yuhei0718/django-pjax-sample



注意点としてハマったところをひとつ。

動作確認中に*-pjax.htmlの中身を、適当に「about」とかだけ書いて動かそうとしてたんですが、これだと正常に動かないです。
具体的にはpjaxのレスポンスの処理がエラーになり、通常のリクエストが投げられて、そちらが描画されることになります。

ちゃんとhtmlタグを書けばpjaxで動きました。

<!-- about -->
<h2>about</h2>