We Keep Coding

How to check if {{#index}} is even or odd in Handlebars?

I'm iterating through an array, but I want to change the div color according to whether the index is odd or even.
Handlebars is not recognizing {{#index}} within an if statement, such as this:
{{#each org as |building i|}}
{{#if (isEven {{#index}})}}
...
{{/if}}
{{/each}}
the isEven is a helper I created to check. It works well, but I can't seem to pass the index to it.
Please keep in mind that I'm using Express Handlebars.

Try it without the brackets around #index
{{#if (isEven #index)}}
...
{{/if}}

handlebarsjs - how to use include in place of repeated code

After a lot of effort I have implemented handlebarsjs to a test site that displays users data as they enter it.
To display the users input in different templates styles, I have had to repeat the same handlebarsjs code several times in the same form.
Is there a way to place the repeated handlebars code in an external page and then include this external page in place of the repeated handlebars code?
I am unsure of the syntax or even if this approach is possible with handlebarsjs (I have tried several things - but cannot get this working).
Here is the culled repeated code that I have:
{{# if address_style_one_line }}
{{! address is to be displayed across one line - replaced line breaks with line space }}
{{# if address_style_01 }}
....
{{else}}
{{# if address_style_02 }}
....
{{else}}
{{! address is to be displayed across more than one line - use this format as the template for the address scross one line style }}
{{# if address_style_01 }}
....
{{else}}
{{# if address_style_02 }}
....
{{/if}}

You should be able to accomplish this with partials. Partials allow you to reuse templates within other templates.
Documentation:
Basic usage: http://handlebarsjs.com/#partials
Other features: http://handlebarsjs.com/partials.html
Rough example:
<script id="address-template" type="text/x-handlebars-template">
{{# if address_style_one_line }}
{{> address}}
{{else}}
{{> address}}
{{/if}}
</script>
<script id="address-partial" type="text/x-handlebars-template">
// repeated template goes here
{{! address is to be displayed across one line - replaced line breaks with line space }}
{{# if address_style_01 }}
....
{{else}}
{{# if address_style_02 }}
....
</script>
<script type="text/javascript">
$(document).ready(function() {
// register partial
Handlebars.registerPartial("address", $("#address-partial").html());
});
</script>

Display surrounding HTML only if Handlebar variable is given

Is it possible to only display surrounding HTML around a Handlebar (or Mustache) variable if it is not empty (or not null, etc)? For instance, given the following context and template:
var data = {field1:123,field2:123,field3:'',field4:123};
<dl>
<dt>field1:</dt><dd>{{field1}}</dd>
<dt>field2:</dt><dd>{{field2}}</dd>
<dt>field3:</dt><dd>{{field3}}</dd>
<dt>field4:</dt><dd>{{field4}}</dd>
</dl>
The following would be displayed:
field1:123
field2:123
field4:123

Rather writing if block for each field you can use the each block helper
<dl>
{{#each this}}
{{#if this}}
<dt>{{#key}}</dt><dd>{{this}}</dd>
{{/if}}
{{/each}}
</dl>
Here you are traversing through the object and checking if the current field is set then display the key and value otherwise move to the next field. It can help you if you have a large set of data then you don't need to write the if block again and again.Hope this helps.
Working example can be found here : http://jsfiddle.net/prabhat_rai/rveap9jb/

The simplest way would be to use the if statement:
<dl>
{{#if field1}}
<dt>field1:</dt><dd>{{field1}}</dd>
{{/if}}
{{#if field2}}
<dt>field2:</dt><dd>{{field2}}</dd>
{{/if}}
...
</dl>

Requirejs Handlebar plugin empty lines

I do not know if this is specific to the requirejs handlebar plugin but when I have a template like :
<h1>abc</h1>
{{#if testcondition1}}
<h1>def</h1>
{{/if}}
{{#if testcondition2}}
<h1>ghi</h1>
{{/if}}
<h1>xyz</h1>
I get a empty line if one condition is false.
so like:
<h1>abc</h1>
<h1>ghi</h1>
<h1>xyz</h1>
and not
<h1>abc</h1>
<h1>ghi</h1>
<h1>xyz</h1>
Is this the expected behavior?
I'd like to get no lines without recurring to string manipulation after the template compilation. I know that lines get ignored in html but this can be really annoying especially in loops.

If you look at the newline placements in your code:
<h1>abc</h1>\n
{{#if testcondition1}}\n
<h1>def</h1>\n
{{/if}}\n
{{#if testcondition2}}\n
<h1>ghi</h1>\n
{{/if}}\n
<h1>xyz</h1>\n
You can see that if the first condition is false, the code without the skipped branch is:
<h1>abc</h1>\n
\n
{{#if testcondition2}}\n
<h1>ghi</h1>\n
{{/if}}\n
<h1>xyz</h1>\n
which gives you two newlines in a row.

If statement within another if statement in Handlebars templates

These are all objects which I am passing to the handlebars template.
self.template = template({ data: self.model, lang:self.lang, page:self.mainPage, subpage:self.param });
Then inside foreach loop I have an if statement where I am not able to access the parent context element. The code which i have inside the template and the problem is shown bellow:
{{#each data}}
<h1>{{../subpage}}</h1> --> This is giving me a subpage value
{{#if this.brand}}
{{#if ../subpage}}
<h1>WHY IS THIS NOT SHOWING?</h1> --> This is what i am trying to achieve
{{/if}}
{{/if}}
{{/each}}
Any ideas how to achieve this? Thank you very much for all answers/comments!

{{#if this.brand}} goes down into context another level, so you must escape to the parent context not once, but twice.
Your template should thus be:
{{#each data}}
<h1>{{../subpage}}</h1>
{{#if this.brand}}
{{#if ../../subpage}}
<h1>This shows now!</h1>
{{/if}}
{{/if}}
{{/each}}
This should work with a self.model value similar to:
[
{
brand: "Brand A",
otherFields: "here"
}
]
Here is a jsFiddle that demonstrates the solution: nested if statement context escaping
I hope that helps!