Simplest way to add one class or another - handlebars.js

Question

With Handlebars, what's the simplest way to add one class or another to each element being rendered by an {{#each ...}} helper? I have to integrate with an existing CSS setup for a site, which requires adding one class or another to alternating elements in a list.
Example helper:
{{#each items}}
<div class="{{what here?}}">...</div>
{{/each}
...where we want even or odd as the class names. (Yes, again, I know this can be done with CSS; I'm integrating with an existing site's CSS, which uses alternating classes instead.)

Answer 1

As a Handlebars newbie, I'm not seeing anything built-in, but the API makes it pretty easy to add a helper that lets you select from an arbitrary-length list of items, like this:
Handlebars.registerHelper('cycle', function(index) {
index = index % (arguments.length - 2); // -2 to leave out `index` and the final argument HB adds
return arguments[index + 1];
});
Using that it would be:
{{#each items}}
<div class="{{cycle #index 'even' 'odd'}}">...</div>
{{/each}
Handlebars.registerHelper('cycle', function(index) {
index = index % (arguments.length - 2); // -2 to leave out `index` and the final argument HB adds
return arguments[index + 1];
});
var items = [
"one", "two", "three", "four", "five"
];
var template = Handlebars.compile(
document.getElementById("template").innerHTML
);
var html = template({items: items});
document.body.insertAdjacentHTML(
"beforeend",
html
);
.even {
color: blue;
}
.odd {
color: green;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
{{#each items}}
<div class="{{cycle #index 'even' 'odd'}}">{{this}}</div>
{{/each}}
</script>
Or if I wanted three classes in rotation:
{{#each items}}
<div class="{{cycle #index 'one' 'two' 'three'}}">...</div>
{{/each}
Handlebars.registerHelper('cycle', function(index) {
index = index % (arguments.length - 2); // -2 to leave out `index` and the final argument HB adds
return arguments[index + 1];
});
var items = [
"one", "two", "three", "four", "five"
];
var template = Handlebars.compile(
document.getElementById("template").innerHTML
);
var html = template({items: items});
document.body.insertAdjacentHTML(
"beforeend",
html
);
.one {
color: blue;
}
.two {
color: green;
}
.three {
color: red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
{{#each items}}
<div class="{{cycle #index 'one' 'two' 'three'}}">{{this}}</div>
{{/each}}
</script>