如何在Meteor.js中使用车把创建网格系统
How do I create a grid system using handlebars in Meteor.js?
我正试图在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;
}
});
相关文章:
- Kinetic.js–创建网格
- Three.js:我可以创建网格来替换很多对象吗
- 如何在Meteor.js中使用车把创建网格系统
- 角度.js ng 重复用于创建网格
- 使用 Knockoutjs 创建网格
- 使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格
- 如何在 angularjs 中使用 ui-grid 为多个表动态创建网格选项
- 从 2 个特定元素创建网格
- jQuery UI,捕捉到网格示例,创建网格线
- 用JavaScript创建网格容器
- 如何在C#/Razar/KendoUI中使用嵌套的DropDownList创建网格
- 使用Handlebars.js创建网格的简单方法
- KineticJs:为拼图创建网格线
- 在Twitter引导程序中创建网格跨度之间的空间
- 为我的页面创建网格外观的最有效的方法
- JavaScript循环在画布上创建网格
- 如何在地图的查看区域中创建网格
- 用CSS在HTML中创建网格的最有效的方法
- 想要使用javascript和html在web应用程序中创建网格视图
- 有人能给我解释一下这个用JS/jQuery创建网格的功能吗