Mach3.laBlog

「jquery.tmpl.js」による手軽なJavaScriptテンプレーティング

この記事は賞味期限切れです。(更新から1年が経過しています)

nje’s jquery-tmpl at master – GitHub
jQueryのテンプレートプラグインは幾つか公開されていますが、
中でもこれはjQueryに馴染んだ記法になるので、使い易いのではないでしょうか。
というわけで、軽くご紹介。

nje’s jquery-tmpl at master – GitHub
ダウンロードはこちらの「DOWNLOAD SOURCE」より。

軽くデモしてみました。

<ul></ul>

<script id="template" type="text/html">
    <li>{%= name %} : ¥{%= price %}</li>
</script>

<script type="text/javascript">
    var foods = [
        { name:"おにぎり", price:100 },
        { name:"フライドチキン", price:150 },
        { name:"カップラーメン", price:180 }
    ];
    $("#template").render(foods).appendTo("ul");
</script>

結果

  • おにぎり : ¥100
  • フライドチキン : ¥150
  • カップラーメン : ¥180

特徴として、テンプレートの中身をscript要素に挿入しています。
typeがtext/htmlになっているのに注意しましょう。
script要素(#template)に格納されているテンプレートを
foodsを元にレンダリングし、ulに挿入する、という流れです。

HTMLの出力には、renderメソッドを用います。

jQuery.fn.render( data, options )

data : Array or Object
If an array, the template is instantiated once for each item. Otherwise, the template is instantiated only once. (配列ならそれぞれのアイテムに対して、そうでなければ一度だけテンプレートがインスタンス化されます。)
options : Object
An object literal representing optional settings. You can set a rendering and rendered event handler. You also can pass any value and the value will be passed to the template. (オプションの設定を格納したオブジェクトリテラルを受け取ります。”rendering”または”rendered”イベントにコールバックを設定する事が可能。また、テンプレートに渡す値を自由に設定する事も出来ます。)

必殺跳訳。だいたい(!?)こんなかんじの意味でしょう。
渡したいアイテムが一つだけの場合は、以下のような感じで。

var foods = { name:"おにぎり", price:100 };

なお、”rendering”および”rendered”イベントは、
それぞれのアイテムのレンダリング全てに関してコールされるのでご注意を。
foodsの中身が100個あれば100回呼ばれます。

この他にも色んな提案が書かれていましたが、
一番よさげと思ったjQuery.fn.renderをログってみました。
他の提案も気になる方はこちらから。
jQuery Templates Proposal – jquery – GitHub
既存のテンプレートエンジンについても言及していますよ。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*