Condition in Handlebars' if statement

handlebars.js, javascript

Solution

As stated in this other SO answer and as @SimonBoudrias mentioned in his answer, since Handlebars 1.1.0, `{{@first}}` is natively supported by `{{#each}}` helper.

Therefore, you can print all attribute names for the first object in an array by using only handlebars native helpers as follows:

{{#each array}}
    {{#if {{@first}}}}
        <!-- It is the first object on the array, print the key for each attribute -->
        {{#each this}}
            <th>{{@key}}</th>
        {{/each}}
   {{/if}}
{{/each}}

Additional note about adding conditional if statements to Handlebars:

Handlebars is a logic-less templating system so it does not include logical statements.

Still, if you want to do it using templates and Handlebars, you could solve this by writing a helper, as explained in this SO answer. In your case, the helper could be something like:

Handlebars.registerHelper('ifIsZero', function(value, options) {
  if(value === 0) {
    return options.fn(this);
  }
  return options.inverse(this);
});

Then, you can call it in your template as follows to do something only if the index is equal to 0:

{{#each array}}
    {{#ifIsZero {{@index}}}}
        <!-- @index is equal to 0, do something -->
        <!-- eg. print the key for each attribute of the object using {{@key}} -->
        {{#each object}}
            <th>{{@key}}</th>
        {{/each}}

    {{else}}
        <!-- otherwise, do something else -->

    {{/ifIsZero}}
{{/each}}

Problem

I'm getting to know Handlebars.js and I would have a question for the community. I know I have a lot more to learn and I'm on my way, but I'd like to see an example to this problem. The array created in JS with the objects: ``` var data = [ { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" }, { Field: "id2", Type: "int(131)", Null: "N3O", Key: "PR3I", Default: null, Extra: "auto_increment" } ]; ``` The format is this because the JSON I receive from the server will look like the exact way, but now for testing I didn't want to make an ajax call. The template: ``` <table> <thead> <tr> {{#each this}} {{#only_once this}} {{#key_value this}} <th>{{key}}</th> {{/key_value }} {{/only_once}} {{/each}} </tr> </thead> ... ``` Because the objects are in an array, I have to loop firstly the array with `{{#each}}` then there comes a registered helper (I found on github) that help me get the key because I want to write only them to the thead. Without my if statement it works fine, fill in the thead with the keys, but because there are 2 objects, it prints out the names twice. My problem is that I want to print them only once and an if would solve my problem that checks if the index of the array is greater than 0 to stop printing out the data, but.. .. Handlebars doesn’t support conditional statements, so code like `{{#if x > y}}` isn’t possible. What do you guys think would be the best solution for it? ``` Handlebars.registerHelper("only_once", function(item, fn){ var buffer; var i = 0; if (i > 0) { buffer = false; } i++; return buffer; }); ``` Well, I tried to write a helper, but I think I did something wrong. My theory was that I give to my if the '`this`' in the template as it (I think) points back to the array and then increase the `i` to check if the index of the array is > than 0, finally if it's true than send back a false - so I thought it will say to the if that don't run the code inside, but I though wrongly.

Original source

Related problems