把手检查每个索引是否可被4整除 [英] HandleBars Check if Index in Each is Divisible by four
问题描述
对把手不是很熟悉，但是我在报告设置中使用了它，并处理了要打印的输出.我要打印的文档每页应为四个，因此我想进行 if(index％4 === 0)之类的检查，但是我不确定该如何做.
Not very familiar with handlebars, but I'm using it in a reporting setting, and working with output intended to be printed. The document I'm printing should be four per page, so I want to do a check like if(index%4 === 0) but I'm a little unsure of how to do it.
我正在使用 {{#eachdataset}}
这是基本布局，也是我尝试每页四页的报告.
here is the basic layout, and my attempt for my four-per-page report.
<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 类用于分页.
The Container will have margins and padding set properly, and each of the reports are contained within the .card class, and the .container class is for the pagination.
IF应该有什么?
这将涉及到我也不太熟悉的 jsreport 中.不知道我是否可以注册一个助手.
This is going to go into jsreport which I'm also not fully familiar with. Not sure if I can register a helper.
推荐答案
车把没有很多内置件-支持逻辑.如果您的模板需要一些简单的数学运算，则必须创建一个或多个 helpers .
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.
在您的情况下，您需要在 @index 中添加 1 ，并确定该结果是否可以被所需的 4页面大小均匀地除尽.
In your case, you need to add 1 to your @index and determine if this result is evenly divisible by your desired page size of 4.
为了让我们的助手做一件事，我建议将此功能拆分为两个助手.我将它们称为 sum 和 isDivisor .
In the interest of having our helpers do one thing, I would recommend splitting this functionality into two helpers; I will call them sum and isDivisor.
sum 将采用任意数量的Numbers作为参数，并返回将它们全部加在一起的结果:
sum will take any number of Numbers as arguments and return the result of adding them all together:
Handlebars.registerHelper('sum', function () {
return Array.prototype.slice.call(arguments, 0, -1).reduce((acc, num) => acc += num);
});
isDivisor 将使用两个数字作为参数，如果第一个数字是
isDivisor will take two Numbers as arguments and will return true if the first Number is a divisor of the second; otherwise false:
Handlebars.registerHelper('isDivisor', function (num1, num2) {
return num1 !== 0 && num2 % num1 === 0;
});
Handlebars的子表达式用括号定界，因此在IF中应该使用以下:
Handlebars' subexpressions are delimited by parentheses, so what should go in your IF is the following:
{{#if (isDivisor 4 (sum @index 1))}}
作为参考，我创建了一个小提琴.
For reference, I have created a fiddle.
但是，尽管以上内容回答了您的问题，但我相信有更好的方法来解决您的问题.
我认为更好的解决方案是创建一个 block helper ，它将您的数组切成块设置所需的页面大小，然后在连接并呈现结果之前将模板应用于每个块.这样的实现如下所示:
I think the better solution would be to create a block helper that will slice your Array into chunks of your desired page size and then apply a template to each chunk, before concatenating and rendering the result. Such an implementation would look like the following:
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 的数据对象，该属性是原始数组的分页切片.我们在模板中使用此帮助程序的方式如下:
The options.fn bit is the interesting part. It is applying our template block to a data object with a single property, items, which is a paged slice of our original array. The way we would use this helper in our template is as follows:
{{#page Badges 4}}
<div class="container">
{{#each items}}
<div class="cardContainer">
{{! TODO: Copy inner template and paste here. }}
</div>
{{/each}}
</div>
{{/page}}
作为参考，我创建了另一个 小提琴.
For reference, I have created another fiddle.
这篇关于把手检查每个索引是否可被4整除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
