I am looking to create a grid with 10 rows and 10 columns using Handlebars. I have already set up the following template:
<script id="battlefield-tmpl" type="x-handlebars-template">
{{#each rows}}
<div class="battlefield__row">
{{#each this}}
<div class="battlefield__cell" data-row="{{this.row}}" data-col="{{this.col}}"></div>
{{/each}}
</div>
{{/each}}
</script>
Next, I have included a script section:
const battleFieldTemplate = getTemplate('battlefield-tmpl');
const temp = battleFieldTemplate({
rows: [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
]
}
);
document.querySelector('#battlefield').innerHTML += temp;
function getTemplate(templateId) {
const templateString = document.getElementById(templateId).innerHTML;
return Handlebars.compile(templateString);
Now, I am seeking to modify the template so that each cell contains both row and column indexes instead of just numbers. The challenge is generating this automatically rather than inputting each index manually.
const temp = battleFieldTemplate({
rows: [
[{row: 0, col: 0}, {row: 0, col: 1}, {row: 0, col: 2} and so on],
If you know how to achieve this without manual input, please share your solution. Thank you!