Question

77

Condition in Handlebars' if statement

rated 0 times [ 79] [ 2] / answers: 1 / hits: 20490 / 11 Years ago, mon, january 13, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susanajamiep

Add To Favorites

Follow

Total Points: 466

Total Questions: 113

Total Answers: 108

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

susanajamiep questions

1 how can I add menu button in telegram bot

Sun, Jun 12, 22, 00:00, 2 Years ago

1 'TypeError: Cannot set properties of undefined (setting '0')'----Array assignment

Sat, Apr 16, 22, 00:00, 2 Years ago

1 Setting cors in strapi 4

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Dynamic import of react hooks

Wed, Jun 10, 20, 00:00, 4 Years ago

1 React Hook useEffect issue with setState

Fri, Jan 24, 20, 00:00, 4 Years ago

View All

answered 11 Years ago adilene · Accepted Answer

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