handlebars.js – 句柄if索引=某个值的语句

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

解决方法

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>

handlebars.js – 句柄if索引=某个值的语句

解决方法

猜你在找的JavaScript相关文章