HandleBars檢查每個索引是否可以被4整除

不是很熟悉把手，但是我在報告設置中使用它，並且處理打印的輸出。我正在打印的文件應該是每頁四張，所以我想要做一個像if(index%4 === 0)的檢查，但我有點不確定如何去做。HandleBars檢查每個索引是否可以被4整除

我會通過對象的數組與{{#each dataset}}

這裏是基本的佈局，我對我的四個每頁報告的嘗試。

<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，我也不完全熟悉。不確定我是否可以註冊助手。

來源

2017-10-06 Chris Rutherford

Handlebars沒有很多內置的邏輯支持。如果你的模板需要一些簡單的數學，你將不得不創建一個或多個helpers。

在你的情況，你需要添加1您@index並確定這個結果是由4您所需的頁面大小整除。爲了讓我們的助手做一件事，我建議將這個功能分成兩個助手;我會給他們打電話sum和isDivisor。

sum將採取任何數量的數字作爲參數，並返回將它們放在一起的結果：

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

isDivisor將採取兩個數字作爲參數，並返回true如果第一個數字是的一個divisor第二;否則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。

來源

2017-10-07 02:12:50 76484

HandleBars檢查每個索引是否可以被4整除

回答

相關問題