Javascript 有没有一种方法可以保存反应式Meteor模板元素上的数据属性？

我正在尝试使用Meteor构建一个简单的游戏。我有一个“游戏”集合，每个游戏都有一个状态，它是一个用于网格的7x7数据数组

我有3个模板，游戏表，该表的一行和该表的一个单元格：

 <template name="game">
  {{#with gameObject}}
    {{name}}
  <table id="gameGrid">
    {{#each state}}
     {{> gameRow}}
    {{/each}}
  </table>
  {{/with}}
</template>

<template name="gameRow">
  <tr>
  {{#each this}}
    {{> gameSpace}}
  {{/each}}
   </tr>
</template>

<template name="gameSpace">
  <td class="game-grid-space colour-{{this}}" ></td>
</template>

我没有在这里使用会话，因为它似乎没有必要，但我已经尝试过了，并且有相同的问题

这基本上是在渲染时标记0-48之间的49个正方形，即按顺序。然后我可以很容易地将其转换为网格位置，并识别单击的正方形

问题是，在任何状态改变时，Meteor似乎都会重新渲染整个DOM，并为每个正方形重新调用该渲染方法。这当然意味着他们的数据属性变得异常，因为它只是不断迭代。据我所知，解决方案似乎是，如果我能以某种方式固定这些数据属性，那么新呈现的dom只保留它们，而不是重写它们

我真正想做的就是根据状态数组中的值在每个网格空间中更改一个类（值为r=red，b=blue等，但只是用作CSS类）-因此，如果我所做的完全是疯狂的，那么这也将是非常有用的反馈！我真的很难弄清楚我应该如何识别哪一个被点击，尽管不是这样

---

提前感谢您的帮助，如果我能提供任何澄清，我很乐意。

为了证实您的怀疑，您所做的完全是疯狂的（但有时也没关系）。为清楚起见，“单元格”是否在开始时设置为特定值？细胞还有其他独特的标识吗？@LorenzoLinarducci感谢您的评论！更清楚一点，我正在尝试7x7（）的克隆，因此我的“细胞”仅由背景颜色定义（这是我存储为状态的内容）。除了它们的位置和颜色之外，没有一个细胞的唯一标识或状态。我可能认为这一切都是错误的，但7x7的颜色网格似乎是一种明显的方法——但似乎需要一个唯一的标识符来识别单击了哪个单元格，我认为这是我真正的问题。

  currentSpaceId = 0;

  Template.gameSpace.rendered = function(){
    if(!this.rendered){
      this.$("td").data("spaceId", currentSpaceId);
      currentSpaceId++;
      this.rendered = true;
    }
  };