0

对车把不太熟悉，但我在报告设置中使用它，并处理要打印的输出。我正在打印的文档应该是每页四个，所以我想做一个检查，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>

Container 将正确设置边距和填充，并且每个报告都包含在.card类中，并且.container该类用于分页。

IF中应该包含什么？

这将进入我也不完全熟悉的jsreport 。不知道我是否可以注册一个助手。

4

1 回答 1

4

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如果第一个数字是第二个数字的除数，则返回；否则false：

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

Handlebars 的子表达式由括号分隔，因此您的 IF 中应该包含以下内容：

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

作为参考，我创建了一个fiddle。

但是，尽管以上回答了您的问题，但我相信有更好的方法可以解决您的问题。

我认为更好的解决方案是创建一个块助手，它将您的 Array 切成所需页面大小的块，然后在连接和呈现结果之前将模板应用于每个块。这样的实现如下所示：

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-07T02:12:50.257 回答