読者です 読者をやめる 読者になる 読者になる

端っこプログラマーの手帳

主にプログラムに関する手記です

【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>

※出力結果はこんな感じ
f:id:kzhishu:20160920222619j:plain