Handlebars と Assemble

Handlebars

いわずもがな js テンプレート, これ自体をあんましチョイスすることはあるのだろうか

Assemble

Handle bars を使用した静的テンプレートエンジン。
grunt で動く。 gulp はまだ開発段階。
middleman とは使い勝手も違うが、node 製なので軽く動く。
やりたいことさえ明確なら、assemble の方が嬉しいこともあるかもしれない。

each とそのコンテキスト

Handlebars には each という機能がある。
hoge.json とかに対して、ブン回す。よくある機能だね。

例えばのファイルを定義しておこう

hoge.json

{
    "list":[
        {
            "val1": "a",
            "val2": "b",
        },
        {
            "val1": "a",
            "val2": "b",
        },
        {
            "val1": "a",
            "val2": "b",
        },
        ...

    ]  
}

hobe.josn

each 中のコンテキスト

これは、 hoge.json に対して向いている。
このとき、this を用いることができる。

{{#each hoge.json}}

    {{this.val1}}

{{/each}}

とか書けば。

a
a
a
...

と出力される。まぁ正しい。

コンテキストって何

ここでいうコンテキストっていうのはなんだろうか？
ここまでコンテキストといってなんだが、実際は Path のことである。

コンテキスト = path であることを理解しておくと何が重要か

さて先ほどのeach 実行中に別のファイル hoge2.jsonを参照したくなった。

hoge2.json を定義しよう。

hoge2.json

{
    "val1": "hogehoge"
}

ここで以下を実行する

{{#each hoge.json}}

    {{this.val1}}

    {{hoge2.val1}}

{{/each}}

さて実行結果は

a
a
a
...

となる。
hogehoge はでてこず(ちなみにエラーがでない！なんてっこった。。。)
ちなみに私の実行環境は assemble 内であるあしからず。

なぜ `hogehoge` がでないかといえば、現在のコンテキストが、hoge.json を向いているからである。

へー。。。じゃあどうすればいいんだい？
handlebarsはキモいことに相対的なパスを用いて、コンテキストの解決ができる。

{{#each hoge.json}}

    {{this.val1}}

    {{../hoge2.val1}}

{{/each}}

こうすることで期待している

a
hogehoge
a
hogehoge
a
hogehoge
...

が得られるわけである。
こんなのは、公式のリファレンスを読めば解決するのだが、なんだってー感が強かったので、
忘れないために文章化した。

Handlebars の each 内の コンテキスト