HandleBarsそれぞれのインデックスが4で割り切れるかどうかをチェック

Question

ハンドルバーはあまりよく知られていませんが、レポート設定で使用しています。私が印刷している文書は1ページに4つでなければならないので、if(index%4 === 0)のようなチェックをしたいのですが、どうすればいいか分かりません。

私はここに{{#each dataset}}

を持つオブジェクトの配列をつもりは基本的なレイアウトで、そして私の4ページあたりのレポートのための私の試み。

<div class="container"> 
    {{#each Badges}} 
    <div class='cardContainer'> 
     <div class="card"> 
      <div class="leftCard"> 
       <p>{{Event}}</p> 
       <p>{{Email}}</p> 
       <p>{{Name}}</p> 
       <p>{{Address}}</p> 
       <p>{{City}} {{State}} {{Zip}}</p> 
      </div> 
      <div class="rightCard"> 
       <h4 class='eventTitle'>{{Event}}</h4> 
       <h2>{{Name}} 
        <br> 
        <span style='font-size: 26pt'>{{City}} <br> {{State}}</span> 
       </h2> 
      </div> 
     </div> 
    </div> 
    {{#if @index%4 === 0}} 
     </div><div class="container"> 
    {{/if}} 
    {{/each}} 
</div> 

コンテナが.cardクラス内の余白とパディングを正しく設定し、レポートのそれぞれが含まれている必要があります、と.containerクラスがページネーションのためです。

IFにはどうすればよいですか？

これは私も完全に慣れていないjsreportに入る予定です。ヘルパーを登録できるかどうかはわかりません。

Answer 1

Handlebarsロジックの組み込みサポートがありません。テンプレートに簡単な数学が必要な場合は、helpersを1つ以上作成する必要があります。

@indexに1を追加し、この結果が希望のページサイズ4で均等に割り切れるかどうかを判断する必要があります。

私たちのヘルパーに1つのことをさせるために、この機能を2つのヘルパーに分けることをお勧めします。私はそれらをsumとisDivisorと呼ぶでしょう。

sumは、引数として数字の任意の数を取り、一緒にそれらすべてを加算した結果を返します。

Handlebars.registerHelper('sum', function() { 
    return Array.prototype.slice.call(arguments, 0, -1).reduce((acc, num) => acc += num); 
}); 

isDivisorは、引数として2つの数値を取ると、最初の数はのdivisorある場合trueを返します。秒;そうでない場合はfalse：

Handlebars.registerHelper('isDivisor', function (num1, num2) { 
    return num1 !== 0 && num2 % num1 === 0; 
}); 

ハンドルバーsubexpressionsは括弧で、その次は、あなたのIFに何を行くべき区切られています。参考のため

{{#if (isDivisor 4 (sum @index 1))}} 

、私はfiddleを作成しました。

しかし、上記はあなたの質問に答えていますが、あなたの問題を解決するにはより良い方法があると思います。

block helperを作成し、配列を目的のページサイズの塊にスライスし、連結して結果をレンダリングする前に各チャンクにテンプレートを適用することをお勧めします。このような実装は次のようになります。

Handlebars.registerHelper('page', function (arr, pageSize, options) { 
    var result = []; 
    for (var i = 0; i < arr.length; i += pageSize) { 
     result.push(options.fn({ items: arr.slice(i, i + pageSize) })); 
    } 
    return result.join(''); 
}); 

options.fnビットは興味深い部分です。私たちのテンプレートブロックを、元の配列のページスライスである単一のプロパティー、itemsを持つデータオブジェクトに適用しています。参考のため

{{#page Badges 4}} 
    <div class="container"> 
     {{#each items}} 
      <div class="cardContainer"> 
       {{! TODO: Copy inner template and paste here. }} 
      </div> 
     {{/each}} 
    </div> 
{{/page}} 

が、私は別のfiddleを作成しました：次のように私たちは私たちのテンプレートで、このヘルパーを使用する方法があります。