带有索引 = 某个值的 if 语句的把手

Question

我正在尝试创建一个表格，该表格使用 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;
});

Answer 1

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 展示了一个快速示例，说明如何获取正在迭代的元素的索引位置并在此基础上应用样式。 当 index % 3 为 0 时，辅助函数将转到 if 块的真实部分（第一个，因为它是基于 0 的索引，然后是每个第三个元素。所有其他时间它将转到 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>