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

我正在试图在流星中构建一个简单的存储卡游戏，而且我似乎无法创建我的卡网格来填充html。我只是试图获得一个4x4网格。如何创建一个在Meteor.js中使用把手的网格系统？

这里是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控制台日志记录，我相信我正确创建拼接行数组，所以我认为问题可能是我已经安排降价的方式。

我试着将每个卡片循环拉入模板中，而不是在内部，但我不确定如何按需渲染模板。这可能是一个选项，因为我有一个可以调用渲染的新游戏按钮事件侦听器。我只是不确定如何明确渲染流星。

我试着跟随这名以前的帖子，但我无法得到它的工作： How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

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

来源

2015-02-23 Jordan Schreuder

“cardsRow”模板中的row或中的“cards”模板中都没有{{text}}，请参阅您希望他们执行的操作。您需要将row和text定义为每个模板的模板助手。在模板助手中，this引用与模板关联的数据对象。

在你的情况，当你通过“容器” #each cards迭代，this传递到“cardsRow”模板在cards辅助函数定义的chunks之一。下面的帮手应该说明这一点，对于你的例子来说就足够了。

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

来源

2015-02-24 00:04:13 pfkurtz

有了这样一个简单的例子，你可以参考'this'直接在你的模板，只是FYI：'的 {{此}}' – pfkurtz 2015-02-24 00:06:51

谢谢！我现在开始工作了。是的，我认为我将HTML文件中的{{text}}引用为数据库，但实际上它是从js文件中的helper方法返回的内容。我只是在返回中调用this.text，我可以看到我的示例字符。 – 2015-02-24 01:56:16

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

回答

相关问题