JavaScript おれおれ Advent Calendar 2011 – 23日目

昨日のデータ埋め込みと一昨日の .replace()に関数を与えるやつを組み合わせて、テンプレートエンジンみたいなのを作成する事ができます。

Ajax/XHRでデータを取得して、その結果を画面に出力するような場面を想定しています。

  • テンプレートはscript[type="text/x-mytemplate"]とかでHTML中に書く
    • キーワードは{#xxx}の形式
  • キーワードと値の組み合わせをひとつのオブジェクトにまとめて、関数に渡す

HTML

まずはテンプレートと、出力先。

<ul id="mylist"></ul>

<script id="mytemplate" type="text/x-mytemplate">
<li><a href="{#url}">{#title}</a> ... {#description}</li>
</script>

これをHTML中に埋め込んでおきます。ここまではHTMLのコーダーさんにお願いしても大丈夫。

スクリプト

続いてスクリプト。XHR受信の処理とかから呼ぶ関数です。

/**
 * 与えられたデータをテンプレートに埋め込み、画面に追加する。
 * data.hogeで与えられたものが、テンプレート中の{#hoge}に入る。
 * @param {Object} data 全てのデータを格納したもの。
 */
function addItem(data) {
  // テンプレート取得
  var template = document.getElementById("mytemplate").text;

  // テンプレートからHTML作成
  var html = template.replace(/{#(\w+)}/g, function(m, key) {
    var text = data[key] || '';  // 該当なければ空文字列
    return text;
  });

  // 画面に追加
  var elList = document.getElementById('mylist');
  elList.innerHTML += html;
}

流れはこんな感じです。

必要に応じて取得した要素を保存しておくとか、入れ子にしたオブジェクトに対応するとかしてください。

そんなんで

いかがでしょ？

UI部とロジック部を分割して記述できるのでコードも綺麗かなと思います。

実行サンプル

むぁーむぁー。