Handlebars: Display HTML markup based on 'nth' - handlebars.js

Question

I'm fairly new to Handlebars so you'll have to excuse my naiveté.
I'm currently working on a Handlebars blog template that utilizes Bootstrap 4 as a CSS framework. For my articles, I would like to iterate through a pattern that repeats itself after the 5th article is displayed on the homepage.
My first article's markup would be the default. Every 2nd and 3rd would use a different block of markup and same with every 4th and 5th.
If you review my code below you will see I am using placeholders for conditionals at the moment (e.g; 'every-2nd & every-3rd'). I am just not sure what I should do here and I haven't been able to find a helper to solve my problem.
<div id="main" class="col-md-8">
{{#each content}}
{{#if every-2nd & every-3rd}}
<div class="col-md-6">
<h4>{{title}}</h4>
<p>{{description}}</p>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{else if every-4th & every-5th}}
<div class="col-md-5">
<img src="{{img_src}}" />
</div>
<div class="col-md-7">
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{else}}
<div class="col-md-12">
<img src="{{img_src}}" />
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/if}}
{{/each}}
Thanks in advance for your time and consideration.

Answer 1

Hello I'll advise you to use a "test" helper that will check for your index loop number.
Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
var doDisplay = false;
var items = (""+rvalue).split("|");
var arrayLength = items.length;
for (var i = 0; (i < arrayLength); i++) {
if (operator == "eq") {
if (lvalue == items[i]) {
doDisplay = true;
}
} else if (operator == "ne") {
if (lvalue != items[i]) {
doDisplay = true;
}
} else if (operator == "gt") {
if (parseFloat(lvalue) > parseFloat(items[i])) {
doDisplay = true;
}
} else if (operator == "lt") {
if (parseFloat(lvalue) < parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "le") {
if (parseFloat(lvalue) <= parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "ge") {
if (parseFloat(lvalue) >= parseFloat(items[i])) {
doDisplay = true;
}
}
}
if (doDisplay) {
return options.fn(this);
} else {
return "";
}
});
So your code will look like that after using the helper :
<div id="main" class="col-md-8">
{{#each content}}
{{#test #index 'eq' '1|2'}}
<div class="col-md-6">
<h4>{{title}}</h4>
<p>{{description}}</p>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{#test #index 'eq' '3|4'}}
<div class="col-md-5">
<img src="{{img_src}}" />
</div>
<div class="col-md-7">
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{#test #index 'ne' '1|2|3|4'}}
<div class="col-md-12">
<img src="{{img_src}}" />
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{/each}}
Let me know in comments if you need more explanations