Question

我试图在Meteor中构建一个简单的存储卡游戏，而我似乎无法在html中创建我的卡片网格。我现在正试图获得一个4x4网格。

这是javascript：

＆＃13;

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;
    },
  });

＆＃13;

这是HTML：

＆＃13;

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

＆＃13;

现在我只是在数据库中有简单的文本条目，以便在我拉入图像之前查看我正在做什么。我已经尝试过从JS获取控制台日志记录，我相信我正确地创建了拼接行数组，因此我认为问题可能与我安排降价的方式有关。

我尝试将每个卡片循环拉到模板中而不是在体内，但我不确定如何按需渲染模板。这可能是一个选项，因为我有一个可以调用渲染的新游戏按钮事件监听器。我只是不确定如何在Meteor中显式渲染。

我尝试过上一篇文章，但我无法让它发挥作用： How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

思考？如果需要，我可以提供更多代码库。

Answer 1

“cardsRow”模板中row中的{{#each row}}和“卡片”模板中的{{text}}都不是指您希望他们这样做的方式。您需要将row和text定义为每个模板的模板助手。在模板助手中，this指的是与模板关联的数据对象。

在您的情况下，当您在“容器”中迭代#each cards时，this将作为chunks中定义的cards之一传递到“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;
    }
});

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

1 个答案: