如何在流星中获得嵌套#each的@index

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

我有一个10x10阵列代表10行，每行10个单元格。我想绘制一个网格，并根据数组中的值设置每个单元格的背景颜色：

a 0 value will be white and a 1 value will be black

0值为白色，1值为黑色

I've set up this CSS:

我已经设置了这个CSS：

.cell{
  height: 20px;
  width: 20px;
  float: left;
  margin: 0;
  padding: 0;
}

.cell.live{
  background-color: black;
}

.cell.dead {
  background-color: white;
}

I created a helper that will return 'live' or 'dead' according to the value in the array according to 2 arguments: x and y

我根据2个参数根据数组中的值创建了一个将返回'live'或'dead'的帮助器：x和y

here's 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 the @index of both of my #each loops

我的问题是我不知道如何获得两个#each循环的@index

here's my template, i couldn't find a solution for the ?????

这是我的模板，我找不到?????的解决方案

<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>

1 个解决方案

#1

You need to use let to capture the index, like:

您需要使用let来捕获索引，例如：

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