jsrender.js - javascriptのテンプレートエンジン

「非同期でHTML(DOM)追加する時どうしますか?」

var newElement = document.createDocumentFragment();
newElement.appendChild(document.createTextNode("ほげ")):
newElement.appendChild(document.createElement("br")):
newElement.appendChild(document.createTextNode("(c)hoge.biz")):
var footer = document.getElementById("footer");
footer.parentNode.insertBefore(newElement, footer);

うぁ!めんどくさっ!お父さん!jQueryくらい使ってよ!

var newElement = $("ほげ<br />(c)hoge.biz");
$("#footer").append(newElement);

めっちゃすっきり!さすがjQuery!、、、でもスクリプト内にHTML書くのって、、、もっと複雑なDOMとかクラスとかスタイルとか属性に値入れてうんぬんかんぬん、、、。

var DomTemplate = {
  hoge: "<div class='hoge'>
    <p>ほげ<br />(c)hoge.biz</p>
  </div>",
  huga: "<div class='huga'>
    <p>HTMLをそのままオブジェクトとして扱っちゃえ!複雑なHTMLでもOK</p>
  </div>
  "
};
$("#footer").append(DomTemplate.hoge);

HTMLをそのままオブジェクトとして格納するのもありかなと思ってたんだけどjavasciptとHTMLがごちゃまぜになるのがどうしても許せなくて、、、。

はい、ここでテンプレートエンジン「jsrender.js」の登場です!

選んだ理由は、jQuery 推薦だから。この業界、長いものに巻かれないといけないことが多々ある。

いやいや、業界標準は押さえとけw

本当の理由は、HTMLソースとjavascriptソースとを完全に分離できるから。

sample.html
<ul id="sampleList"></ul>
<script id="template" type="text/x-jsrender">
{{for array}}
  <li>{{>name}}</li>
{{/for}}
</script>

sample.js
var hoge = [{
  array: [
    { name: "teruo" },
    { name: "hirochin" }
  ]},
}];
$("#sampleList").html($("#template").render(hoge));

あと jsrender って Smarty に似てるので親しみやすい。

※追記

連想配列じゃなくて添字配列の場合はどうするのかな?と思ったら、こうしたらいいらしい。"#data"を使う。

<ul id="sampleList"></ul>
<script id="template" type="text/x-jsrender">
{{for array}}
  <li>{{>#data}}</li>
{{/for}}
</script>

var array = ["teruo", "hirochin"];
$("#sampleList").html($("#template").render(array));

かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』