HOME>WEBプログラム覚書>[jQuery] もう+演算子とはおさらば。jQuery Templates

[jQuery] もう+演算子とはおさらば。jQuery Templates

いまさらながら、jQueryに公式なテンプレートプラグインあるの気がつきました。 もう一年以上前に出ていたんですね。まだベータだけどw

jQuery.tmpl( template [, data] [, options] )

.tmpl()がドキュメント内に記述された文字列をテンプレートとして利用するのに対し、 こちらはJavascriptの変数に入ってる文字列とか、その場でテンプレートを記述したい場合に便利です。

.tmplItem()

dataや、レンダリングに利用したデータはDOMツリー追加後に.tmplItem()で取得することができます。 (テンプレート内ではitem、dataが利用できる。)

.tmplItem()で返ってくるオブジェクトは、.nodes、.parent、.data、.tmpl、.tmpl()の第二引数で設定したdata、 のプロパティを持っています。

サンプル

クリックで料金をalert。.tmpl()の第二引数で渡したオブジェクトのtaxプロパティは.tmplItem().tax()で呼び出せる。

実行結果

Javascript

  1. $('<div>', {
  2.     html: $.tmpl(
  3.               '<p>[<b>NO.${no}</b>] ${name}</p>',
  4.               [
  5.                   { no: 1, name: 'ロケット',   price: 100},
  6.                   { no: 2, name: 'ランチャー', price: 200},
  7.                   { no: 3, name: 'ドリル',     price: 300},
  8.                   { no: 4, name: 'レーダー',   price: 400}
  9.               ],
  10.               {
  11.                   tax: function(price) {
  12.                            return price * 1.05;
  13.                        }
  14.               }
  15.           ),
  16.     class: 'switches'
  17. }).appendTo('.jqTest2').find('p').on('click', function(e){
  18.     var item = $(e.target).tmplItem();
  19.     alert(item.tax(item.data.price));
  20. });

HTML

  1. <div class="jqTest2">
  2. </div>

{{html name}}

テンプレートに挿入される値は、レンダリング時にエスケープされますが {{html name}}を利用するとエスケープなしでレンダリングされます。

当然、外部の入力をいきなりこれで出力するとヤバいのでやめましょう。

サンプル

実行結果

Javascript

  1. $('#template-3')
  2. .tmpl({ name: '<a href="http://www.caquu.com/">www.caquu.com</a>' })
  3. .appendTo('.jqTest3');

HTML

  1. <div class="jqTest3">
  2.  
  3.     <script id="template-3" type="text/x-jquery-tmpl">
  4.         <dl>
  5.         <dt>デフォルト</dt>
  6.         <dd>${name}</dd>
  7.         </dl>
  8.  
  9.         <dl>
  10.         <dt>html</dt>
  11.         <dd>{{html name}}</dd>
  12.         </dl>
  13.     </script>
  14.  
  15. </div>

${name} = {{= name}}

${name}は{{= name}}のショートハンドなので、どちらも同じ結果となります。

PHP内で利用する場合、${name}がPHPの構文とかぶるので、エスケープする必要がありますが、 {{= name}}を使えばエスケープなしで利用できます。

その他

テンプレート内ではif文やeachなども利用可能です。さらにテンプレートのネスト等もできるようです。 詳しくはドキュメントを参照ください。

おまけ。

jQuery Templatesはご覧のようにjQueryで使いやすく仕上がってますが、ここまで大きくなくていい。 っていうかsprintf、str_replaceがあればなぁって思ってるかたはこちらがおススメです。

投稿日 2011年12月12日 11:11
カテゴリ JavaScript
タグ jQuery
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1244

コメント

コメントする
Name
Email Address
URL
$('
', { html: $.tmpl( '

[NO.${no}] ${name}

', [ { no: 1, name: 'ロケット', price: 100}, { no: 2, name: 'ランチャー', price: 200}, { no: 3, name: 'ドリル', price: 300}, { no: 4, name: 'レーダー', price: 400} ], { tax: function(price) { return price * 1.05; } } ), class: 'switches' }).appendTo('.jqTest2').find('p').on('click', function(e){ var item = $(e.target).tmplItem(); alert(item.tax(item.data.price)); });$('#template-3') .tmpl({ name: 'www.caquu.com' }) .appendTo('.jqTest3');