2013年5月20日月曜日

jquery.tmpl.jsのテンプレートを外部化して動的に読み込みつつレンダリングするには?

クライアントサイドのテンプレートエンジンは色々あるけれど、JSPに慣れた人間からするとjquery.tmpl.jsが一番わかりやすかった。

BorisMoore/jquery-tmpl · GitHub

ただ、このライブラリは開発が停止している。このライブラリをフォークして開発が続けられているのがこちららしい。

KanbanSolutions/jquery-tmpl · GitHub

こちらのサンプルを参考にすると本当に簡単にできた。

jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive

もはや、サーバーサイドのCPUを使ってHTMLをレンダリングする時代じゃないんだなというのを実感。

ただ、サンプル通りにやるとHTMLのコードが読みづらくなったりエディターでフォーマットしづらくなる。

その辺をどうにかしたいと思って簡単なサンプルアプリケーションを作ってみた。

「行を追加」というボタンをクリックするとlinesパラグラフに行番号と追加日時の行が追加されるというアプリケーション。この行のレンダリングにテンプレートエンジンを使う。


サンプルコード一式

HTMLのコードはこんな風。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>JSPライクにテンプレート</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="jquery.tmpl.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
    <p><button onclick="addLine();">行を追加</button></p>
    <p id="lines"></p>
  </body>

</html>

ごらんの通り、HTMLにはテンプレートが含まれていない。ここが第1のポイント。

サンプルではHTMLの中にscriptタグを書いて、その中にテンプレートを書いているけれど、これだとエディターでフォーマットがしづらくなる。

そこでまず、行のテンプレートを_template.htmlというファイルに外部化する。外部化すればエディターでフォーマットしやすい。

<div><strong>${lineNum}.</strong> ${date}</div>

そして、この_template.htmlをHTTPのGETで動的に読み込む。そのためにはjQueryのgetが使える。ここが第2のポイント。

これはJSPで言えば「@ include file="_template.html"」的なものだ。

main.jsはこんな風。

//テンプレート
var $template = null;

//行番号
var lineNum = 0;


//初期化
$(document).ready(function() {

  //_template.htmlをHTTP GETで読み込んで$templateに代入
  $.get("_template.html", function(tmpl) { $template = tmpl; });

});


//行を追加するメソッド
function addLine() {

  //行番号インクリメント
  lineNum++;

  //置換に使うパラメーターオブジェクト作成
  var obj = new Object();
  obj.lineNum = lineNum;
  obj.date = new Date();

  //テンプレートをパラメーターオブジェクトの値で置換してlineのパラグラフに追加
  $.tmpl($template, obj).appendTo("#lines");

} // END addLine()

初期化後、ボタンをクリックするとaddLine()が呼び出されて、置換するパラメーターを作り、テンプレートエンジンでテンプレートを変換し、その変換された行がlinesパラグラフに追加される。

うん。これでスッキリ!