jQuery用の便利なテンプレートエンジンjTemplatesJavascript

MTSです。

jQueryを使ってWebページの一部を動的に書き換える場合ってありますよね。
こんな感じで。

<script type="text/javascript">

  $.ajax({
    ～ 中略 ～
    success: function(data, status, xhr) {
      $("#test").append("<div id='hoge'>" + data.num + "</div>");
    };
  });
</script>

一部分であればこれで十分ですが、書き換える規模が大きくなった場合、JavaScript内でハードコーディングするのは避けたいですよね。

そういう場合、今回紹介するjQuery用のプラグインjTemplatesが便利です。
公式サイト：http://jtemplates.tpython.com/

jsファイル読み込み

scriptタグでsrc設定するだけです。

<script type="text/javascript" src="jquery-jtemplates.js"></script>

JavaScript側

データ形式がJSONであれば問題なく使えるようです。

<script type="text/javascript">
  $.ajax(
    url: JSON形式で結果を返すスクリプト,
    dataType: "json",  // JSON形式を指定
    success: function(data, status, xhr) {
      // div要素「hoge」にテンプレート要素「hoge_tpl」をセット
      $("#hoge").setTemplateElement("hoge_tpl");
      $("#hoge").processTemplate(data);  // JSONデータをテンプレートにセット
    }
  );
</script>

使用するJSONデータ

{"item":[
  {"itemName":"ハンバーグ",
   "itemPrice":600},

  {"itemName":"カレーライス",
   "itemPrice":500},

  {"itemName":"スパゲティ",
   "itemPrice":550}
]
}

HTML側のコード

<div id="hoge"></div>

<textarea id="hoge_tpl" style="display:none;">

<table class="sheet">
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>

    {#foreach $T.item as itemData}
    <tr>
      <th>{$T.itemData.itemName}</th>
      <td>{$T.itemData.itemPrice}円</td>
    </tr>
    {#/foreach}
</table>

</textarea>

textareaタグ内がテンプレートの中身になります。
表示させないようにdisplay:noneに設定します。

$T.～はテンプレート内で変数を使用する際に記述します。
上記の例だと、processTemplate(data)でセットした値を呼び出しています。

{#foreach}～{#/foreach}はjTemplateのループ構文になります。
phpやSmartyを使用していればすぐ馴染めると思います。
やっている事としては、各itemのitemName、itemPriceを表示させているだけです。

出力結果

　　 　　 　　

商品名	価格
ハンバーグ	600円
カレーライス	500円
スパゲティ	550円

このように、jTemplatesを使うことで、複雑な要素書換を簡単に行うことが出来ます。
他にも計算機能やJSの関数呼び出し機能、マルチテンプレート機能などがあります。
それらを組み合わせることで細かい点にも対応できると思います。