我尝试创建一个表,用JSON文件中的对象填充每个表格单元格。我的把手模板只是添加了每个对象的数据。我尝试完成的是每5个项目创建一个新行,然后继续填充表格单元格直到第10个项目然后它创建一个新行等。
我一直在阅读@index。是否有某些函数可以执行{{#if @index / 5 == 0}}之类的操作?否则是否有一些把手可以实现我试图实现的功能?我并不局限于使用表格,我认为这是放置数据的最佳选择。
我目前的模板。谢谢你的帮助!我使用把手助手编辑了下面的内容。但这些信息仍然无法呈现。还有其他代码在结束后编译模板,但它在本地文件中包含一个非常长的json数组用于测试。
<script type = "text/x-handlebars-template" id="itemTemplate">
<table class="tableStyle">
<tr>
{{#each all_coupons}}
{{#ifPos}}
<tr>
<td>
<div class="wrapper">
<div class="header">{{coupon_title}}</div>
<div class="column_wrapper">
<div class="two-col">
<div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
<div class="description">{{coupon_description}}</div>
</div>
</div>
<div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>
</div>
</td>
</tr>
{{else}}
<td>
<div class="wrapper">
<div class="header">{{coupon_title}}</div>
<div class="column_wrapper">
<div class="two-col">
<div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
<div class="description">{{coupon_description}}</div>
</div>
</div>
<div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>
</div>
</td>
{{/ifPos}}
{{/each}}
</tr>
<table>
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src-"js/handlebars.runtime-v1.3.0.js"></script>
<script type="text/javascript">
Handlebars.registerHelper('ifPos', function (context, options) {
var pos = false;
for (var i = 0, j = context.length; i < j; i++) {
if (context.length/5 == 0)
{
pos = true;
}
else {
pos = false;
}
}
console.log(pos);
return pos;
});
答案 0 :(得分:13)
context.length/5 == 0
不会为您提供每5个元素所需的值。当5/5为1时,最好使用模数(%)来给出余数,这样当它等于0时你知道它已经完全进入了它。
此外,当您想要自己创建if / else块句柄栏时,会为您提供options.fn和options.inverse。返回options.fn(//无论你想传递给if块的什么)或options.inverse(//什么都提供给else块)从你的帮助器进入块的相关部分。
Here is a code pen显示了一个快速示例,说明如何获取正在迭代的元素的索引位置并应用基于此的样式。 当索引%3为0时,辅助函数将转到if块的真实部分(第一个,因为它是基于0的索引,然后是每个第3个元素。所有其他时间它将转到else
<强>辅助强>
Handlebars.registerHelper('ifThird', function (index, options) {
if(index%3 == 0){
return options.fn(this);
} else {
return options.inverse(this);
}
});
<强>模板强>
<script id="template" type="text/x-handlebars-template">
{{#each this}}
<p class="{{#ifThird @index}}
red
{{else}}
blue
{{/ifThird}}">{{@index}} - {{name}}</p>
{{/each}}
</script>