黒羊庭園

技術系の話題とかその他

■[jquery][template][memo]jQueryのテンプレートプラグイン「jquery-tmpl」を使ってみた (多分)その2

前回の続き

ハッシュをループする場合

<div style="display: none">
    <div id="tmpl">
        {{each data}}
        <div>${this}</div>
        {{/each}}
    </div>
</div>
<script>
    (function($) {
        var data = {
            'asheep': 'foo foo foo',
            'bsheep': 'bar bar bar'
        };
        $('#tmpl').tmpl({data: data}).appendTo('#main');
    })(jQuery);
</script>

こうした場合、ハッシュのキーが異なるので「${this}」で「foo foo foo」と「bar bar bar」は出ますが、「asheep」「bsheep」を使う事ができません。

なので、each()に受取用の変数を置くことで取得できます。

<div id="tmpl">
    {{each(key) data}}
    <div>${key} says ${this}</div>
    {{/each}}
</div>
<!--
<div>asheep says foo foo foo</div>
<div>bsheep says bar bar bar</div>
-->

オブジェクトを更に掘っていく場合は

    {{each(key,value) data}}
    <div>${key}</div>
    <div>${value.child}</div>
    {{/each}}

のように書くこともできます

デバッグ用(?)

これはやっていいことか不明なんですけど、テンプレで複雑なオブジェクトをレンダリングする際にループの中身を確認したくなることがあってconsoleに出力したりしてます

    {{each(key,value) data}}
    <div>${console.log(value)}</div>
    {{/each}}

HTMLとしてはundefinedと表示されてしまうので、あくまで一時的にということで・・・