HOME > > > >

${} Template Tag

テンプレートタグ。バインドされるデータにHTMLがに含まれていた場合エスケープされる。エスケープしない場合、{{html}}を利用する。

サンプル

実行結果

Javascript

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

HTML

  1. <div class="jqTest1">
  2.  
  3.     <script id="template-1" 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 class="screen"></div>
  16. </div>

${field}の代わりに{{= field}}も利用できる。というか${}が{{= field}}のエイリアスっぽい。 ${}はPHPのヒアドキュメント内で変数をパースする場合に使うので、そういう場合は{{= field}}使うといいかも。

サンプル

実行結果

Javascript

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

HTML

  1. <div class="jqTest2">
  2.  
  3.     <script id="template-2" type="text/x-jquery-tmpl">
  4.         <p>{{= name}}</p>
  5.     </script>
  6.  
  7.     <div class="screen"></div>
  8. </div>

渡されたデータのメソッド等も利用できる。

サンプル

実行結果

Javascript

  1. $('#template-3')
  2. .tmpl([
  3.     { name: 'HOME',       info: ['/', 'サイトTOP', 'test']},
  4.     { name: 'jQuery API', info: ['/reference/jquery/api/', 'jQuery APIのリファレンス', 'test', 'test']},
  5.     { name: '開発環境',   info: ['/development/', 'Windowで快適な開発環境を求めて', 'test', 'test', 'test']}
  6. ])
  7. .appendTo('.jqTest3 .screen');

HTML

  1. <div class="jqTest3">
  2.  
  3.     <script id="template-3" type="text/x-jquery-tmpl">
  4.         <p><a href="{{= info[0]}}">{{= name}}</a> - {{= info[1]}} [info.length: {{= info.length}}]</p>
  5.     </script>
  6.  
  7.     <div class="screen"></div>
  8. </div>

テンプレートレンダリング時に$itemと$dataがテンプレート変数として利用できる。

$itemはparentとdataというプロパティを持っていて、dataは現在参照しているデータ。 {{= name}}と{{= $item.data.name}}は等価。

parentはよくわかんね。$dataは第二引数で渡したオブジェクトがバインドされている。

サンプル

実行結果

Javascript

  1. $('#template-4')
  2. .tmpl([
  3.         { name: 'HOME',       info: ['/', 'サイトTOP']},
  4.         { name: 'jQuery API', info: ['/reference/jquery/api/', 'jQuery APIのリファレンス']},
  5.         { name: '開発環境',   info: ['/development/', 'Windowで快適な開発環境を求めて']}
  6.     ], {
  7.         join: function(str){
  8.                   return 'http://www.kantenna.com' + str;
  9.               }
  10.     })
  11.     .appendTo('.jqTest4 .screen');

HTML

  1. <div class="jqTest4">
  2.  
  3.     <script id="template-4" type="text/x-jquery-tmpl">
  4.         <dl>
  5.             <dt><a href="{{= $item.data.info[0]}}">{{= $data.name}}</a></dt>
  6.             <dd class="url">{{= $item.join($item.data.info[0])}}</dd>
  7.             <dd>{{= $item.data.info[1]}}</dd>
  8.         </dl>
  9.     </script>
  10.  
  11.     <div class="screen"></div>
  12. </div>