/ programing

jQuery tmplのtemplateでユーザ関数を使ってみた AmazonJS 0.1.3b

AmazonJS 0.1.3bをリリースした。

もともとはWordPress 3.3 BetaでjQueryのバージョンがあがるよーってことで動作確認したけどそもそもAmazonJSはWordPress 3.0以上ではWordPress同梱のjQueryをwp_enqueue_scriptで読み込むので他のプラグイン達が余計なことをしない限り大丈夫なのであった。が、それ以外の問題で動かなかったのでちょこっと修正した。AmazonJSは投稿画面からAmazon商品を検索する際にメディアのアップロード/挿入のダイアログを流用しているのだけれど、そのあたりで3.3 betaだとうまく動かなったので修正した。

あとずっと直したかった問題をようやく修正した。

jQuery Mobile

↑のように販売価格が取れるときに参考価格に取り消し線を入れて、販売価格を強調して表示ということをやっていたのだけど、実は 参考価格 = 販売価格な時もそうなっていた。これを修正するにはtemplateに制御文を入れないといけないんだけど、それが複雑になりそうだったので放置していた。

今回のバージョンではtemplateでユーザ関数を使うようにして対応してみた。

templateは以下の様な感じ。$itemがtemplateに適応されるアイテムにあたる。

'{{if $item.isSale()}}',
    '<b>'+r.ListPrice+'</b><span class="amazonjs_listprice">${ListPrice.FormattedPrice}</span><br/>',
    '{{if OfferSummary.LowestNewPrice}}<b>'+r.Price+'</b>${OfferSummary.LowestNewPrice.FormattedPrice}{{/if}}',
    '<span>'+r.PriceUpdatedat+'</span>',
'{{else}}',
    '<b>'+r.Price+'</b>${ListPrice.FormattedPrice}',
    '<span>'+r.PriceUpdatedat+'</span>',
'{{/if}}'

(このエントリ書いてて気がついたけど strong タグ使うべきだったな・・・）

で、$itemから呼び出す関数は$.tmplを使う場合は第3引数で指定する。

$.tmpl($template, item, {isSale:function(){
    if (this.data) {
        var lp = this.data.ListPrice, la = lp.Amount || 0,
            os = this.data.OfferSummary || {}, sp = os.LowestNewPrice || {}, sa = sp.Amount || 0;
        return (sa != 0 && sa < la);
    }
    return false;}});

複雑な条件表現は関数にして提供した方がtemplateは読みやすくなる。このあたりが全部javascriptでできるのは素敵だ。

ドキュメントはわかりにくいけど http://api.jquery.com/template-tag-equal/ のあたりにある。

Markdown with by ❤ wp-gfm