0

我正在尝试使用 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>

第一个中的 GameObject 上下文是我收藏中的一个游戏 - 它有一个名称和一个 7x7 数组的状态。

为了处理每个元素上的点击事件，我在它们呈现时为其分配了一个数据属性，如下所示：

  currentSpaceId = 0;

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

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

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

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

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

在此先感谢您的帮助，如果我能提供任何澄清，我将很高兴。

4

0 回答 0