「jQuery Templates」を調べてみた。

このエントリーをはてなブックマークに追加
ご無沙汰してます、h.kashiwagiです。

今回は、「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/

次の記事
« Prev Post
前の記事
Next Post »

1 コメント:

Write コメント
匿名
AUTHOR
2014年7月31日 15:33 delete

{{if ${age} > 20}} じゃなくて{{if age > 20}} だと思いますが。

Reply
avatar
Related Posts Plugin for WordPress, Blogger...