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

【问题标题】：How do I create a grid system using handlebars in Meteor.js?如何在 Meteor.js 中使用把手创建网格系统？
【发布时间】：2015-02-24 09:49:35
【问题描述】：

我正在尝试在 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 中显式渲染。

我尝试按照上一篇文章进行操作，但无法正常工作： How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

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

【问题讨论】：

标签： javascript html meteor

【解决方案1】：

无论是“cardsRow”模板中的{{#each row}} 中的row，还是“cards”模板中的{{text}}，都请按照您希望的方式进行引用。您需要将row 和text 定义为每个模板的模板助手。在模板助手中，this 指的是与模板关联的数据对象。

在您的情况下，当您在“容器”中迭代 #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;
    }
});

【讨论】：

有了这样一个简单的例子，你可以直接在你的模板中引用this，仅供参考：<span class="text">{{this}}</span>
谢谢！我现在开始工作了。是的，我认为我将 html 文件中的 {{text}} 混淆为引用数据库，但实际上它是从 js 文件中的辅助方法返回的内容。我刚刚在 return 中调用了 this.text，我可以看到我的示例字符。