How to concatenate and pass down a Handlebars variable into a partial - handlebars.js

Question

This is our Handlebars partial we've called input-field. We're trying to dynamically create name and email fields based on the number of participants selected on the previous page.
<div class="form-group {{errors.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{errors.fullName.message}}</p>
<input type="text" class="form-control" name="fullName" value="{{values.fullName}}">
</div>
We have some functions which create and display error messages if any of those form fields are unfilled. Instead of {{errors.fullName.class}}, we need it to be {{errors.fullName{{this}}.class}}.
We've found that Handlebars doesn't allow you to refer to another handlebars variable inside a handlebars statement this way.
It's all within an each loop:
{{#each otherOccupiers}}
{{> input-field}}
{{/each}}
Does anyone have an idea about how to achieve this effect, maybe by writing a handlebars helper function or some other way to perform this concatenation.

Answer 1

I'm assuming the data object you are passing to handlebars looks something like this:
{
otherOccupiers: ["A", "B"],
errors: {
fullName: {
class: "error-class",
message: "error-message"
}
}
}
However if you change the structure of your data object to look something like this:
{
errors: {
otherOccupiers: [
"A" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
"B" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
]
}
}
Then you can do an each loop like this:
{{#each errors.otherOccupiers}}
<div class="form-group {{this.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{this.fullName.message}}</p>
<input type="text" class="form-control" name="fullName">
</div>
{{/each}}