今回は、「jQuery Templates」についてご紹介してみようと思います。
■そもそも何?
Javascriptで利用できるテンプレートエンジンです。
■ダウンロード
GitHubからダウンロードして利用できます。
■利用方法
1. データ部分
var data = [ { Name: "H.K", age: "27" }, { Name: "T.F", age: "18" }, { Name: "K.O", age: "29" } ]; $('#template').tmpl(data).appendTo("#target");2. テンプレート部分
<ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${age})</li> </script>※ #templateを指定した<script>タグに対して、Jsonデータを渡し、#targetが宣言されているタグで仕様可能にさせる。
3.出力結果
こんな感じになります。
<ul id="target"> <li><b>H.K</b> (27)</li> <li><b>T.F</b> (18)</li> <li><b>K.O</b> (29)</li> </ul>■Template Tag
1. ${} Template Tag (Jsonデータのアイテムの値を取得する )
<ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${age})</li> </script>1. {html} Template Tag (サニタイジングをせずに値を取得する )
<ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> <li><b>{html Name}</b> ({html age})</li> </script>2. {{if}} Template Tag (条件構文)
<ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> {{if ${age} > 20}} <li><b>${Name}</b> (${age})</li> {{/if}} </script>3. {{else}} Template Tag (条件構文)
<ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> {{if ${age} > 20}} <li><b>${Name}</b> (${age})</li> {{else}} <li><b>${Name}</b> (詐称)</li> {{/if}} </script>4. {{each}} Template Tag (ループ構文)
var data = [ { Name: "H.K", age: "28", likes: ['a', 'b'] }, { Name: "T.F", age: "18", likes: ['a', 'b', 'c'] }, { Name: "K.O", age: "29", likes: ['a', 'b', 'c', 'd'] } ]; <ul id="target"></ul> <script id="template" type="text/x-jquery-tmpl"> <li> <b>${Name}</b> (${age}) {{ each likes }} ${$value} {{ /each }} </li> </script>5. {{tmpl}} Template Tag (テンプレートの代入)
var movies = [ { Name: "The Red Violin", Director: "Francois Girard" }, { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" }, { Name: "The Inheritance", Director: "Mauro Bolognini" } ]; $('#movieTemplate').tmpl(data).appendTo("#movieList"); <script id="movieTemplate" type="text/x-jquery-tmpl"> {{tmpl "#titleTemplate"}} <tr class="detail"><td>Director: ${Director}</td></tr> </script> <script id="titleTemplate" type="text/x-jquery-tmpl"> <tr class="title"><td>${Name}</td></tr> </script> <table><tbody id="movieList"></tbody></table>6. {{wrap}} Template Tag (テンプレートの代入)
<script id="myTmpl" type="text/x-jquery-tmpl"> The following wraps and reorders some HTML content: {{wrap "#tableWrapper"}} <h3>One</h3> <div> First <b>content</b> </div> <h3>Two</h3> <div> And <em>more</em> <b>content</b>... </div> {{/wrap}} </script> <script id="tableWrapper" type="text/x-jquery-tmpl"> <table><tbody> <tr> {{each $item.html("h3", true)}} <td> ${$value} </td> {{/each}} </tr> <tr> {{each $item.html("div")}} <td> {{html $value}} </td> {{/each}} </tr> </tbody></table> </script>■デモ
シャノンのツイートをAPIで取得して、表示させてみた。
(単純にJSONデータを取得して、表示させたものだが、、)
http://service.shanon.co.jp/blog/988385995704066370/find/twitter.html
■まとめ
簡単なHTMLのコーディングならこれで全然問題ない。
これを調べたついでに、他に何かないのかいろいろ調べてみると、
Hogan.js
jarty.js
jsmarty.js
Tmpltr.js
結構いっぱいあった。ってかまだまだある。
詳細はまだ見てないけど、
他のものも調べて、一番良さげなやつをシステムに組み込んでみようか検討中・・
次は、各エンジンの特徴をまとめてベンチマークとかとってみたい。
では、また。
■ 参考サイト
http://api.jquery.com/category/plugins/templates/
1 コメント:
Write コメント{{if ${age} > 20}} じゃなくて{{if age > 20}} だと思いますが。
Reply