How to get @index of nested # element in meteor

Question

I have a 10x10 array representing 10 rows of 10 cells each. I want to draw a grid and set the background color of each cell according to the value in the array:

A value of 0 will be white, and a value of 1 will be black.

I installed this CSS:

.cell{ height: 20px; width: 20px; float: left; margin: 0; padding: 0; } .cell.live{ background-color: black; } .cell.dead { background-color: white; } 

I created an assistant that will return “live” or “dead” according to the value in the array according to two arguments: x and y

here is the code:

 Template.grid.helpers({ cellState: function(x, y) { if(screenArray[x][y] === 1){ return 'live'; } else { return 'dead'; } } }); 

my problem is that I don’t know how to get @index of both of my #each loops

here is my template, I could not find a solution for

 <template name="grid"> <div class="gridWrapper"> {{#each row in rows}} <div class="row"> {{#each cell in row}} <div class="cell {{cellState @index ?????}}">{{this}}</div> {{/each}} </div> {{/each}} </div> </template> 

Answer 1

You need to use let to capture the index, for example:

 {{#let rowIndex=@index }} {{#each cell in row}} <div class="cell {{cellState @index rowIndex}}">{{this}}</div> {{/each}} {{/let}}