把手如果陈述与索引=一些价值 [英] Handlebars if statement with index = some value
问题描述
我试图创建一个表，使用JSON文件中的对象填充每个表格单元格。我的把手模板只是为每个对象添加一个数据。我试图完成的是每5个项目创建一个新行，然后它继续填充表格单元格，直到第10个项目，然后创建一个新行等。
<我一直在阅读@index。是否有一些功能可以执行{{#if @index / 5 == 0}}？否则有一些handlebars提供可以实现我正在尝试做的功能吗？我并不仅仅限于使用表格，我认为这是放置数据的最佳选择。
我当前的模板。谢谢你的帮助！我使用一个把手帮手编辑下面。但是这些信息仍然没有呈现。还有其他的代码可以在模板结束后编译模板，但它包含一个非常长的json数组，用于测试。
< script type =text / x-handlebars-templateid =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 =Appleheight =110width =110>< / div>
< div class =description> {{coupon_description}}< / div>
< / div>
< / div>
< div class =expiration>有效期从：{{valid_from}}到{{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 =Appleheight =110width =110>< / div>
< div class =description> {{coupon_description}}< / div>
< / div>
< / div>
< div class =expiration>有效期从：{{valid_from}}到{{valid_to}}< / div>
< / div>
< / td>
{{/ ifPos}}
{{/ each}}
< / tr>
< table>
< / script>
< script type =text / javascriptsrc =js / jquery.js>< / script>
< script type =text / javascriptsrc =js / handlebars.js>< / script>
< script type =text / javascriptsrc-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;
}）;
上下文。长度/ 5 == 0
不会为您提供每个第5个元素所需的值。当5/5为1时，最好使用模数（％）给你余数，这种方式当它等于0时，你知道它已经进入了整体。
另外当想要做你自己的if / else块句柄栏为你提供options.fn和options.inverse。返回options.fn（//任何你想传递给if的块）或者options.inverse（//提供给else块的东西）从你的帮助器进入块的相关部分。
下面是一个代码笔，显示了一个快速示例如何获得正在迭代的元素的索引位置并基于该元素应用样式。
当索引％3为0（第一个，因为它是一个基于0的索引，然后是每个第三个元素，所有其他时间将转到else），辅助函数将转到if块的真实部分
助手
Handlebars.registerHelper （'ifThird'，function（index，options）{
if（index％3 == 0）{
return options.fn（this）;
} else {
return options.inverse（this）;
}
}）;
模板
< script id =templatetype =text / x-handlebars -template>
{{#each this}}
< p class ={{＃ifThird @index}}
red
{{else }}
blue
{{/ ifThird}}> {{@ index}} - {{name}}< / p>
{{/ each}}
< / script>
I'm trying to create a table that populates each table cell with an object from a JSON file. My handlebars template just adds a with the data for each object. What I'm trying accomplish is for every 5th item a new row is created and then it continues populating out the table cells until the 10th item then it creates a new row etc.
I've been reading up on @index. Is there some function that does something like {{#if @index / 5 == 0}} ? Otherwise is there something handlebars offers that could achieve the functionality I'm trying to do? I'm not confined to use a table I just figured that was the best option to put the data.
My current template. Thanks for any help! I edited this below using a handlebars helper. But the information still doesn't render. There is additional code that compiles the template after the end of this but it includes a very long json array in the local file for testing.
<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;
});
context.length/5 == 0
will not give you the value you want every 5th element. As 5/5 is 1, better to use modulus(%) which gives you the remainder, this way when it equals 0 you know it has gone into it whole.
Also when wanting to do your own if/else block handle bars provides you with options.fn and options.inverse. Return options.fn(//whatever you want to pass to the if block) or options.inverse(//what ever to provide to the else block) from your helper to go into the relevant part of the block.
Here is a code pen showing a quick example of how you could get the index position of the element you are iterating over and apply a styling based on that. The helper functions will go to the true part of the if block when index % 3 is 0 (the first, because it is a 0 based index, and then every 3rd element. All other times it will go to the else
Helper
Handlebars.registerHelper('ifThird', function (index, options) {
if(index%3 == 0){
return options.fn(this);
} else {
return options.inverse(this);
}
});
Template
<script id="template" type="text/x-handlebars-template">
{{#each this}}
<p class="{{#ifThird @index}}
red
{{else}}
blue
{{/ifThird}}">{{@index}} - {{name}}</p>
{{/each}}
</script>
这篇关于把手如果陈述与索引=一些价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
