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

handlebarsjs-2
Handlebars.jsのIF文の使い方を解説していきます。
以前当ブログで紹介したFor文の使い方の仲間です。

[スポンサーリンク]

このページでやること

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

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

こちらはJavaScriptのロジックです。
IF文の結果がTrueになるロジックを紹介しています。

function createTemplate(){
    var value = {
            val: 'これは変数です。'
            };
    template = Handlebars.compile($('#template').html());
    $('#display').html(template(value));
}

こちらはテンプレートです。
「#if val」で先ほどの変数の存在チェックをしています。
実行結果は、「変数valは存在します。」が表示されます。

<script id="template" type="text/x-handlebars-template">
{{#if val}}
    <p>変数valは存在します。 変数 : {{{val}}}</p>
{{else}}
    <p>変数valはありません。</p>
{{/if}}
</script>

デモ

こちらで実際に動かすことが出来ます。
実際に動かすことが出来ます

Handlebars.jsのIF文がFalseになるケースも紹介します。

変数の値が空の場合、これはIF結果がFalseになります。

function createTemplate(){
    var value = {
            val: ''
            };
    template = Handlebars.compile($('#template').html());
    $('#display').html(template(value));
}

変数自体が存在しない場合、これもIF結果がFalseになります。

function createTemplate(){
    var value = {
            };
    template = Handlebars.compile($('#template').html());
    $('#display').html(template(value));
}

デモ

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

公式ページ

IF文をもっと詳しく知りたい方は、以下のページを開いてConditionalsで検索してください。
コチラのサイトが公式ページの解説となっています。

handlebars-basic-4

さいごに

Handlebars.jsってテンプレートエンジンとしてはかなり使いやすいです。
もっと流行れー!
それでは!