■[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と表示されてしまうので、あくまで一時的にということで・・・