【JavaScript】テンプレートエンジンHandlebars.jsのFor文の使い方

handlebarsjs-2
Handlebars.jsのFor文ループの使い方を解説していきます。

[スポンサーリンク]

このページでやること

Handlebars.jsのFor文の使い方を紹介します。

Handlebars.jsのFor文を使ったサンプルソース

こちらはJavaScriptのロジックです。
3行目の値はForループで表示するために、配列で値を持たせています。

function createTemplate(){
    var value = {
              array: ['array1', 'array2', 'array3', 'array4', 'array5']
            };
    template = Handlebars.compile($('#template').html());
    $('#display').html(template(value));
}

こちらはテンプレートです。
「#each 変数名」で先ほどの配列分ループさせています。

<script id="template" type="text/x-handlebars-template">
    {{#each array}}
        <p>{{{this}}}</p>
    {{/each}}
</script>

デモ

実際に動かすことが出来ます

公式ページ

以下のページを開いてSimple Iteratorsで検索してください。
コチラのサイトが公式ページの解説となっています。

handlebars-basic-4

さいごに

Handlebars.jsのコードって全てがすっきりしているから楽でいいですよね。
それでは!