我有一个10x10阵列代表10行,每行10个单元格。 我想绘制一个网格,并根据数组中的值设置每个单元格的背景颜色:
0值为白色,1值为黑色
我已经设置了这个CSS:
.cell{
height: 20px;
width: 20px;
float: left;
margin: 0;
padding: 0;
}
.cell.live{
background-color: black;
}
.cell.dead {
background-color: white;
}
我根据2个参数创建了一个根据数组中的值返回'live'或'dead'的帮助器:x和y
这是代码:
Template.grid.helpers({
cellState: function(x, y) {
if(screenArray[x][y] === 1){
return 'live';
}
else {
return 'dead';
}
}
});
我的问题是我不知道如何获得两个#each循环的@index
这是我的模板,我找不到?????
的解决方案<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>
答案 0 :(得分:16)
您需要使用let
来捕获索引,例如:
{{#let rowIndex=@index}}
{{#each cell in row}}
<div class="cell {{cellState @index rowIndex}}">{{this}}</div>
{{/each}}
{{/let}}