如何在Meteor.js中使用车把创建网格系统

How do I create a grid system using handlebars in Meteor.js?

本文关键字：创建 网格 系统 Meteor js      更新时间：2024-04-19

我正试图在Meteor中构建一个简单的内存卡游戏，但我似乎无法创建一个用html填充的卡网格。我现在只是想获得一个4x4的网格。

这是javascript：

Template.body.helpers({
    cards: function() {
      var allCards = Deck.find({}).fetch();
      var chunks = [];
      while (allCards.length > 0) {
        chunks.push(allCards.slice(0, 4));
        allCards = allCards.slice(4);
      }
      return chunks;
    },
  });

这是HTML:

<body>
  <div class="container">
    <div name="gameBoard">
      {{#each cards}}
        {{> cardsRow}}
      {{/each}}
    </div>
  </div>
</body>
<template name="cardsRow">
  <div class="row">
    {{#each row}}
      {{> card}}
    {{/each}}
  </div>
</template>
<template name="card">
  <span class="text">{{text}}</span>
</template>

现在，我只在数据库中有一些简单的文本条目，以便在输入图像之前查看我在做什么。我已经尝试过从JS中进行控制台日志记录，我相信我正确地创建了拼接行的数组，所以我认为问题可能在于我安排标记的方式。

我试着把每张卡片的循环都拉到一个模板中，而不是在主体中，但我不知道如何根据需要呈现模板。这可能是一个选项，因为我有一个新的游戏按钮事件监听器，可以调用渲染。我只是不知道如何在Meteor中显式渲染。

我试着关注上一篇文章，但我无法让它发挥作用：如何使用Meteor.js中每个命令的手柄来填充引导程序网格系统？

想法？如果需要，我可以提供更多的代码库。

无论是"cardsRow"模板中{{#each row}}中的row，还是"cards"模板中的{{text}}，都不能以您希望的方式引用它们。您需要将row和text定义为每个模板的模板助手。在模板助手中，this是指与模板相关联的数据对象。

在您的情况下，当您在"container"中迭代#each cards时，this会作为cards帮助函数中定义的chunks之一传递到"cardsRow"模板中。下面的帮助者应该说明这一点，并且对于您的示例来说已经足够了。

Template.cardsRow.helpers({
    row: function() {
        console.log(this); // a chunk of cards
        return this;
    }
});
Template.card.helpers({
    text: function() {
        console.log(this); // a number in a chunk
        return this;
    }
});
相关文章：