1. ホーム
  2. javascript

[解決済み] handlebars.jsのテンプレートを使って、配列の最後のアイテムに条件を付ける

2023-07-12 19:52:46

質問

私はテンプレートエンジンのためにhandlebars.jsを活用しており、条件付きのセグメントがテンプレート構成オブジェクトに含まれる配列の最後の項目である場合にのみ表示するようにしたいと思っています。

{
  columns: [{<obj>},{<obj>},{<obj>},{<obj>},{<obj>}]
}

私はすでに、いくつかの等号/大文字/小文字の比較を行うヘルパーを引っ張ってきて、この方法で最初のアイテムを特定することに成功しましたが、ターゲット配列の長さにアクセスすることに運がなかったのです。

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {...})

"{{#each_with_index columns}}"+
"<div class='{{#equal index 0}} first{{/equal}}{{#equal index ../columns.length()}} last{{/equal}}'>"+
"</div>"+
"{{/each_with_index}}"

どなたか、近道、異なるアプローチ、および、最良のコースを決定するためにhandlebars.jsエンジンに侵入する必要がないようなhandlebarsの良さをご存知でしょうか?

どのように解決するのですか?

Handlebars v1.1.0より、以下のように @first@last のブーリアン演算をこの問題の各ヘルパーで行います。

{{#each foo}}
    <div class='{{#if @first}}first{{/if}}
                {{#if @last}} last{{/if}}'>
      {{@key}} - {{@index}}
    </div>
{{/each}}


私が書いた手軽なヘルパーは

Handlebars.registerHelper("foreach",function(arr,options) {
    if(options.inverse && !arr.length)
        return options.inverse(this);

    return arr.map(function(item,index) {
        item.$index = index;
        item.$first = index === 0;
        item.$last  = index === arr.length-1;
        return options.fn(item);
    }).join('');
});

では、書けます。

{{#foreach foo}}
    <div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>
{{/foreach}}