Handlebars if statement with index = some value

Question

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;
});

Quince Quince · Accepted Answer · 2014-06-23T20:01:49

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>

Handlebars if statement with index = some value

1 Answers