jQuery template pluginをWordPressに組込んで使ってみた。

1.プラグインのダウンロード

(1)次の公式サイトよりテンプレートをダウンロードする。（zip形式ファイルをダウンロードする)
https://github.com/jquery/jquery-tmpl
(2)ダウンロードしたzipファイルを解凍してjquery.tmpl.min.jsファイルを取り出す。

2.WordPressへの組込み

(1)jquery.tmpl.min.jsファイルをWordPressが入っているサーバにアップロードする。
(2)WordPress実行時に次のようにアップロードしたjquery.tmpl.min.jsファイルを読み出す
<script type=”text/javascript” src=”http://testsub.sakuraweb.com/js/jquery.tmpl.min.js”></script>

3.試験 次のソースコードでテンプレートが動作するか確認した。

<form>
  <input id="exec" type="button" value="実行">
</form>
<div id="contener"></div>
<!-- テンプレート  -->
<script id="template" type="text/x-jquery-tmpl">
<div>
  <h2>${title}</h2>
  <ul>{{each(i,name) tech}}<li>${i+1}つめの矢 ${name}</li>{{/each}}</ul>
  <ul>{{each(key,value) desc}}<li>${key}: ${value}</li>{{/each}}</ul>
</div>
</script>
<!-- JavaScript -->
<script type="text/javascript">
jQuery(function(){
  jQuery('input#exec').click(exec);
});

function exec(){
  var contener = jQuery('div#contener');
  jQuery('#template').tmpl(
    { title:'アベノミクス３本の矢',
     tech:['大胆な金融緩和','機動的な財政出動','成長戦略'],
     desc:{大胆な金融緩和:'資金を大量に市場へ流入させる',機動的な財政出動:'公共事業を増やすことで民間に資金を流す',成長戦略:'各産業の企業が競争力をつけて日本経済全体が成長させる'}
    }
  ).appendTo(contener);
}
</script>