HandleBars 각각의 인덱스가 4로 나눌 수 있는지 확인

Question

핸들 막대에는 익숙하지 않지만보고 설정에서 사용하고 있으며 출력용으로 인쇄하고 있습니다. 내가 인쇄하는 문서는 페이지 당 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을 만들어야합니다.

귀하의 경우 @index에 1을 추가하고이 결과가 원하는 페이지 크기 4로 균등하게 나눌 수 있는지 확인해야합니다.

우리의 도우미가 한 가지를하려면,이 기능을 두 명의 도우미로 나누는 것이 좋습니다. 나는 그들을 sum과 isDivisor이라고 부를 것이다. 첫 번째 숫자는의 divisor 경우

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

isDivisor는 인수로 두 개의 숫자를 취할 것이며, true를 반환합니다

:

sum 인수로 숫자의 수를 가지고 함께 그들 모두를 추가하는 결과를 반환합니다 둘째; 그렇지 않으면 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을 만든 다음과 같이 우리는 우리의 템플릿이 도우미를 사용하는 것이 방법이다.