Kohana で pjax をしてみたよ！
先日作成した簡単なページのページネーション部を pjax で動作するようにしてみました！
pjax については google で検索するといっぱいでてくるので、そちらを参照してください(´・ω・`)
Kohana PHP で実現するために、まずはモジュールを探してみました！
Kohana には http://kohana-modules.com/ というサイトがあり、現時点(2012/1/6)で 605 ものモジュールが登録されています。早速探してみると…あったあった、ありました！
(※ 他にも Facebook だったり Twitter だったり google map だったり、いろいろと便利なモジュールが用意されていますよ！ )
Kopjax – Pjax jQuery ajax module for Kohana 3.1(.2)
https://github.com/cambiata/kopjax
セットアップ
モジュールをダウンロードし modules/ ディレクトリに解凍。 ディレクトリ名称を kopjax にしました。
モジュールを追加したら bootstrap.php に追記しましょう。
/** * Enable modules. Modules are referenced by a relative or absolute path. */ Kohana::modules(array( // 'auth' => MODPATH.'auth', // Basic authentication // 'cache' => MODPATH.'cache', // Caching with multiple backends // 'codebench' => MODPATH.'codebench', // Benchmarking tool 'database' => MODPATH.'database', // Database access // 'image' => MODPATH.'image', // Image manipulation 'orm' => MODPATH.'orm', // Object Relationship Mapping // 'unittest' => MODPATH.'unittest', // Unit testing // 'userguide' => MODPATH.'userguide', // User guide and API documentation 'pagination' => MODPATH.'pagination', 'kopjax' => MODPATH.'kopjax', ));
一番下に追加しました。
pagination モジュールのリンクを変える
前回の記事のままでは、ページ指定が query_string 設定となり ?page_id= となっていました。 これを route 設定に変更します。
Route::set() を追加
ルーティングを追加して、ページの指定をURLに含ませる形式を設定します。
application/bootstrap.php に追記します。
Route::set('top', '(<page_id>)', array('page' => '[0-9]+'))
->defaults(array(
'controller' => 'top',
'action' => 'index',
'page_id' => null,
));
Controller_Top の、 action_index() でページを切り替えます。 URL にすると http://www.example.com/1 などと数値がページ送りid(page_id) になります。
pagination の設定を変更
$pagination = Pagination::factory(array(
'item_per_page' => 10,
'total_items' => $all_address->count_all(),
'current_page' => array(
'source'=> 'route',
'key' => 'page_id'),
'auto_hide' => false,
'first_page_in_url' => false,
));
current_page の source の部分を query_string から route に変更しました。
リンクを pjax 対応にする
モジュールには pjaxdemo というコントローラやビューファイルが用意されており、これを参考に書き換えます。
コントローラ
最初に Controller_Top を変更します。
ajax(pjax)出力か通常の出力かを判定しビューを切り替えて出力する様です。 CakePHP には beforeFilter() や afterFilter() のほか、 beforeRender() などありますが、 KohanaPHP には before() および after() の2種類のコールバックがあります。 このコールバックを利用し、複数のアクションに対して処理を行うようにします。
public function after()
{
if (!$this->request->is_ajax()) {
$this->view = View::factory('pjax/template');
} else {
$this->view = View::factory('pjax/content');
}
$this->view->set('content', $this->content);
$this->response->body($this->view);
}
ajax の場合には pjax/template を。通常のアクセスの場合は pjax/content を読み込む形になるようです。
ビュー
コントローラで指定した pjax/template および pjax/content を用意します。
もちろん、ひな形となるファイルはモジュール kopjax の中に views/pjax/ 以下にそれぞれファイルがありますので、この2つのファイルを application/views/ の下に pjax ディレクトリを作成してコピーします。
※ そのままでも良いのですが、サンプル用のリンクなどがある為。
template.php
<html>
<head>
<title>address</title>
</head>
<?php $mediabase = Route::url('media'); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="<?php echo $mediabase ?>/pjax/js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
// pjax
$('a').pjax('#content')
})
</script>
</head>
<body>
<div id="content">
<?php echo View::factory('pjax/content')->set('content', $content) ?>
</div>
<?php echo date('Y-m-d H:i:s'); ?>
</body>
</html>
サンプルにあったデモ用のリンクを削除し、pjax化するリンクの対象をアンカータグすべてに変更しました。
content.php
<?php echo $content; ?> <hr /> <?php echo (Request::current()->is_ajax()) ? 'Content part loaded using Ajax' : 'Whole page loaded using standard Page refresh'?>
3行目で、ajax で表示されているか、通常読み込みされたかどうかが表示されるようになっています。
おわり
あとは、データを10件以上登録しページ送りをしてみてください。
Content part loaded using Ajax
と表示され、その下の時刻もページを切り替えても書き換わらず、同じ時間が表示されています。そして、2ページ目などが表示されている状態で、再読み込みをすると、2ページ目のまま、最下部の表示が以下のように変わるはずです。
Whole page loaded using standard Page refresh
