タグ機能が欲しい最近。
忘れないうちに書いてしまう。
pjax
説明面倒なのでハショる。Google先生に聞いて。
導入のアレコレ
jquery.pjax.jsをダウンロード
htmlに読み込み
<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/js/jquery.pjax.js"></script>
pjaxを登録
(function($){
// pjaxを登録
$('a.pjax').pjax('#main', {"timeout": 36000});
// pjaxイベントの登録
$('#main')
.bind('pjax:start', function(){ /* 開始時の処理 */})
.bind('pjax:end', function(){ /* 終了時の処理 */ });
});
server-sideでpjax用のレンダリングを設定
以下のどちらかを満たしていれば、pjaxのリクエストであると判定
- リクエストヘッダに"X-PJAX"
- GETパラメータに"_pjax=true"
テンプレートにText::Xslateを使っているため、以下のような仕組みを入れなければならない。
- pjaxリクエストであある
- コンテンツ部分である add-pjax.html.tx をレンダリング
- pjaxリクエストでない
- add-pjax.htmlをinclude, layout.txをcascadeした完全なhtmlをレンダリング
use HTML::FillInForm::Lite qw/fillinform/;
use Text::Xslate qw/html_builder/;
use Mojolicious::Lite;
my %template_options = (
function => {fillinform => html_builder(\&fillinform)},
);
plugin 'xslate_renderer' => {
template_options => \%template_options,
};
my $tx = Text::Xslate->new({
path => './templates/',
%template_options,
});
get '/slide/add' => sub {
my $self = shift;
if ($self->param('_pjax')) {
my $string = $tx->render('slide/add-pjax.html.tx');
$self->render_text($string);
} else {
$self->render('slide/add');
}
};
これで、<a class="pjax" herf="/slide/add">なリンクがpjaxとして動くようになった。
はまりどころ
- pjaxのデフォルトのtimeout時間が鬼畜
- うっかりhtmlタグを入れたままにすると、通常遷移
pjaxのデフォルトのtimeout時間が鬼畜
pjaxはajaxリクエストが（設定の）timeout時間を超えると location.href による遷移を行う。
なので、次のように自分でtimeoutを設定するが吉。
$('a.pjax').pjax('#main', {"timeout": 36000});
