【JsRender】配列に無い要素を、for文の中で参照する方法
JsRender(javascriptのテンプレートエンジン)のfor文の中で、ループの各要素には無い値を参照したいことがある。
各要素に参照したい値を一つ一つ設置するという力技もあるが、すべて同じ値のためモヤモヤ感が半端ない。もっとスマートな方法は無いものか。
結論から言うと、renderメソッドの第2引数に設定してあげることでfor文の中でも参照できた。ドキュメントを見ると第2引数はヘルパー関数やメタデータを設定するとあるので、想定されている使い方ではないかもしれないが、意図通り動作しているので問題無いでしょう。
JsRender API documentation
http://www.jsviews.com/#tmplrender
具体例
ジャンルは全作品で共通のため、第2引数に設定する。
設定した値は、~[keyname]、つまり~genre で参照できる。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <script type="text/javascript" src="./jsrender.min.js"></script> </head> <body> <script id="template" type="text/x-jsrender"> <ul> {{for books}} <li>{{:author}}『{{>title}}』({{:~genre}})</li> {{/for}} <ul> </script> <ul id='booklist'></ul> <script type="text/javascript"> var output = $('#template').render({ books: [ {title: '剣客商売', author: '池波正太郎'}, {title: '坂の上の雲',author: '司馬遼太郎'}, {title: '蝉しぐれ', author: '藤沢周平'} ] }, {genre: '歴史・時代小説'} ); $('#booklist').html(output); </script> </body> </html>
※出力結果はこんな感じ