WordPressでAmazonの紹介をjavascriptで頑張るプラグインを書いてみたが、他の人のように独自テンプレートで頑張る気もおきず、ましてはsmartyなどはオーバースペックすぎると思ったのでjQuery tmplを使って表示している。なかなかドキュメントがでてこないので自分用備忘録としてメモを書いてみることにする。
jQuery tmplを導入するには
jQuery tmplは2010/12現時点ではβ版で、最近なにかとjQueryの採用に熱心なマイクロソフトのCDNで配布されている。jQuery tmplはjQuery 1.4.2以上が必要なので
<script type='text/javascript' src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js'></script>
をhtmlに追加すればよい。(jQuery本体は別にjQuery tmpl用に変更されているわけじゃないのでGoogleのCDNからでもjQueryのサイトからダウンロードして自分のサイトにおいたやつでもよい）
テンプレートの作成
jQuery tmplでは表示用のテンプレートと、データを分けて管理できる。テンプレートを作成する方法はいくつかがあるけど、テンプレートに名前をつけて管理できるjQuery.templateを使うようにしている。
$.template('hellowWorldTempalte', '<p>Hello, ${name}</p>" );
というようにデータから展開したいものを${propertyName}でいれた普通のhtmlを設定すればよい。
データのバインディング
事前に作成しておいたテンプレートをつかってデータを表示するには jQuery.tmpl() を使う。第一引数にjQuery.templateで作成したテンプレートの名前、第二引数で表示するデータ(Object)を入れる。ちなみにいきなり第一引数にテンプレートを書き出しもできるので詳しくはドキュメントを参照のこと。
$.tmpl('hellowWorldTempalte', {name:'Makoto'});
この結果はいつものjQuery要素なので $.tmpl(...).appendTo('#result'); だとか、$('#result').append($.tmpl(...)) とかして表示したい位置に突っ込んでやれば良い。
テンプレートの制御文
jQuery tmplでは分岐とか繰り返しといった制御に対応している。
分岐は{{if}}で行える。よく使うのはあるプロパティがあれば表示するといったときに
{{if SalesRank}}<li><b>商品ランキング</b>${SalesRank}位</li>{{/if}}'
というようなやり方。（値がない(null)のと0のときを分けないといけないときは厳密に比較する必要がある)
ポイントは条件文では${}は必要なくてそのままプロパティ名を記述するというところ、ドキュメントにも載っていないので比較演算子がどこまで使えるのかは試していない。
繰り返しは{{each}}でおこなえるがまだ使ったことがない。ちなみに文字列の配列を格納したプロパティは勝手にjoinされて展開された。これが意図した動作なのかは不明である。
展開結果をテキストで取得する
jQuery tmplを使ったものの、ケースバイケースで静的に表示したいので展開した結果をhtml文字列として取得したくなった。結局いい方法がわからなかったので適当なDOM要素に追加してその要素からhtmlを取り出している。
var $item = $.tmpl(tplName, selectedItem);
$preview.empty().append($item);
$previewCode.val($preview.html());
しかしこの方法でもjavascriptの実行が必要になるので、RSSフィードのときはどうしたものかと悩んでいるところ。jQuery tmplを展開するだけのWebサービスをつくらないといけないのだろうか。。。キャッシュを無期限にしてよいならWordPressの管理ページを開いているときに裏でつくって保存のためにXHRでサーバに送りつけるとかできるけど。
wp-gfm