ASP.NET MVC、jQuery template、恋の予感

皆さんは jQuery template というプラグインをご存知でしょうか？名前の通り jQuery 関連のプラグインなんですが、これが非常に優れものでして最近興奮しっぱなしです。

何をするプラグインかというと、名前に template とあるように JavaScript で書かれたテンプレートエンジンなんですよ。テンプレートエンジンと言っても ASPX や Razor のように高機能なものではありませんが、それだけでも革命的なプラグインだと思っています。

何はともあれ使ってみることにしましょう。今回は Twitter からユーザーのツイートを読み込んで表示するという非常に単純なプログラムを作ります。

Page not found | jQuery API Documentation

まずは jQuery template を読み込む必要が当然あります。公式ページからダウンロードできますが、Microsoft Ajax CDN でも配布されているので、こっちを使うことをお勧めします。当然ですが jQuery 自体の読み込みも必要になりますよ。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js "></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

これで jQuery template を使う準備が出来ました。先ほどの公式ページのドキュメントを見ていただければわかるように、メソッドは 6 つしかなく非常にシンプルなプラグインになっています。

とりあえずツイートを表示するためのテンプレートを作成するわけですが、テンプレートの作り方には 2 種類あって、それぞれテンプレートのコンパイル時に引数として渡すか、type="text/x-jquery-tmpl" を指定した script タグの中に書き込むかになります。今回はしっかりと分離しておきたいので script タグを使います。

<script id="tweet-template" type="text/x-jquery-tmpl">
    <li><img src="${user.profile_image_url}" /><a href="http://twitter.com/${user.screen_name}">${user.screen_name}</a><p>${text}</p></li>
</script>

これでテンプレートは完成しましたが、${...} という見慣れない指定がありますね。これが jQuery template が認識するテンプレートタグの一つで、実行時には ${...} 内の文字列が評価されて出力されます。HTML エスケープを行ってくれるので、ASPX で言うところの <%: %> タグに相当します。<%: %> タグ相当のテンプレートタグがあるなら <%= %> に相当する {{...}} テンプレートタグもあります。このタグを使うと HTML エスケープを行いませんので、タグを有効に出来るわけですね。

他にも条件分岐を行う {{if}}, {{else}} タグ、ループ処理を行う {{each}} タグ、別のテンプレートを評価して埋め込む {{tmpl}} タグなどがあります。引数は少し指定が特殊なものがあるので、ドキュメントを見てくださいね。

後は Twitter からツイートを取得して jQuery template に渡す処理です。jQuery オブジェクトに tmpl メソッドが追加されているので、表示したいオブジェクトを渡して呼び出して、何処かの親要素に追加すれば完成です。

// tmpl メソッドはテンプレートのコンパイルを行っている
$("#tweet-template").tmpl(tweets).appendTo("#target");

新しく要素を作成するのに DOM 操作を行う必要がないというのは非常に魅力的です。テンプレートの分離はやはり大切ですね。

Twitter から JSONP でデータを取得する部分は省略しましたが、以下に完成したコード全てを用意したのでそちらで確認してください。このサンプルでは私のツイート 20 件を取得して表示します。

<html>
<head>
    <title>jQuery template + Twitter</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js "></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=shibayan&callback=?", function(tweets) {
            $("#tweet-template").tmpl(tweets).appendTo("#target");
        });
    });
    </script>
</head>

<body>

<ul id="target"></ul>

<script id="tweet-template" type="text/x-jquery-tmpl">
    <li><img src="${user.profile_image_url}" /><a href="http://twitter.com/${user.screen_name}">${user.screen_name}</a><p>${text}</p></li>
</script>

</body>
</html>