HandleBars 检查每个中的索引是否可被四整除

Question

不太熟悉车把，但我在报告设置中使用它，并处理要打印的输出。我正在打印的文档每页应该有四个，所以我想做一个像 if(index%4 === 0) 这样的检查，但我有点不确定该怎么做。

我正在使用 {{#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 class 中，.container class 用于分页。

IF 应该放什么？

这将进入 jsreport，我也不完全熟悉。不确定我是否可以注册助手。

Answer 1

Handlebars does not have a lot of built-in support for logic. If your template requires some simple math, you are going to have to create one or more helpers.

在您的情况下，您需要将 1 添加到 @index 并确定此结果是否可以被您想要的页面大小 4.

整除

为了让我们的助手做一件事，我建议将此功能拆分为两个助手；我会称他们为 sum 和 isDivisor.

sum 将接受任意数量的数字作为参数，return 将它们加在一起的结果：

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

isDivisor 将接受两个数字作为参数，如果第一个数字是第二个数字的 divisor，则将 return true；否则 false:

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

Handlebars' 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。

HandleBars 检查每个中的索引是否可被四整除

HandleBars Check if Index in Each is Divisible by four

handlebars.js

jsreport