Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handlebars if statement with index = some value

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;
});
like image 973
Trevor Avatar asked Jun 20 '14 19:06

Trevor


People also ask

Is there else if in Handlebars?

Handlebars supports {{else if}} blocks as of 3.0. 0. is the point in not having an elsif (or else if) in handlebars that you are putting too much logic into your template.

How do you iterate objects in Handlebars?

To iterate over an object with JavaScript and Handlebars. js, we can use the #each keyword. to add the Handlebars script and the template for looping through each entry in data . We use #each this to loop through each array property.

How do you use unless Handlebars?

You can use the unless helper as the inverse of the if helper. Its block will be rendered if the expression returns a falsy value. If looking up license under the current context returns a falsy value, Handlebars will render the warning. Otherwise, it will render nothing.


1 Answers

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>
like image 167
Quince Avatar answered Oct 22 '22 00:10

Quince