handlebars.js - Handlebars if statement with index = some value -

handlebars.js - Handlebars if statement with index = some value -

i'm trying create table populates each table cell object json file. handlebars template adds info each object. i'm trying accomplish every 5th item new row created , continues populating out table cells until 10th item creates new row etc.

i've been reading on @index. there function {{#if @index / 5 == 0}} ? otherwise there handlebars offers accomplish functionality i'm trying do? i'm not confined utilize table figured best alternative set data.

my current template. help! edited below using handlebars helper. info still doesn't render. there additional code compiles template after end of includes long json array in local file 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}} {{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}} {{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; (var = 0, j = context.length; < j; i++) { if (context.length/5 == 0) { pos = true; } else { pos = false; } } console.log(pos); homecoming pos; });

context.length/5 == 0

will not give value want every 5th element. 5/5 1, improve utilize modulus(%) gives remainder, way when equals 0 know has gone whole.

also when wanting own if/else block handle bars provides options.fn , options.inverse. homecoming options.fn(//whatever want pass if block) or options.inverse(//what ever provide else block) helper go relevant part of block.

here code pen showing quick illustration of how index position of element iterating on , apply styling based on that. helper functions go true part of if block when index % 3 0 (the first, because 0 based index, , every 3rd element. other times go else

helper

handlebars.registerhelper('ifthird', function (index, options) { if(index%3 == 0){ homecoming options.fn(this); } else { homecoming options.inverse(this); } });

template

<script id="template" type="text/x-handlebars-template"> {{#each this}} <p class="{{#ifthird @index}} reddish {{else}} bluish {{/ifthird}}">{{@index}} - {{name}}</p> {{/each}} </script>

handlebars.js