<head>
<title>bubblePop</title>
</head>
<body>
<center>{{> hello}}<center>
</body>
<template name="hello">
<h1>Bubble Pop!!!!</h1>
{{greeting}}
</template>
我明白 Handlebars {{> hello}} 是怎么回事，基本上这样你就可以在任何地方插入 {{> hello}}，它与模板中的一样。但我正在尝试使用 javascript 在我的 meteor 应用程序上制作一张大 table 。如何将我的代码放入 Handlebars 中？我可以使用 <template> 吗？在我的 JS 文件中？我的其余代码有点困惑:
JS:
if(Meteor.isClient) {
Meteor.startup(function (){
$(document).ready(function(){
var el;
for(var i=1; i<=64; i++){
el = document.createElement('div');
$(el).addClass('button');
$(el).on('click', function(){
$(this).addClass('removed');
});
$('#container').append(el);
}
});
})
<template name="bubbles">
</template>
Template.hello.greeting = function () {
}
Template.hello.events({
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
CSS:
#container {
width: 440px;
max-width: 440px;
}
#container > .button {
display: inline-block;
width: 50px;
height: 50px;
background-image: url('http://placehold.it/50x50');
margin-right: 5px;
margin-bottom: 5px;
opacity: 0.85;
transition: all 0.07s ease-in-out;
-moz-transition: all 0.07s ease-in-out;
-webkit-transition: all 0.07s ease-in-out;
cursor: pointer;
}
#container > .button:hover {
opacity: 1;
}
#container > .button.removed {
background-image: none;
}
如何让所有这些按钮都出现？有些东西我只是不明白
最佳答案
您正在尝试将命令式编程技术应用于响应式范例。
当数据更改时，模板会使用更新后的数据隐式重新呈现。
尝试在 handlebars 中创建一个简单的循环，并将表格绑定(bind)到一个集合。然后，您可以通过集合(或游标)控制行数或行的顺序。
请记住，如果将模板绑定(bind)到文档，则模板中的this 就是文档。因此，您可以根据方法或成员显示/隐藏按钮。例如。 {{getFirstName}} 就像说 my_document.getFirstName()。
<table id="comments">
<tr>
<th>One</th>
<th>Two</th>
</tr>
{{#each comments}}
<tr>
<td>{{one}}</td>
<td>{{two}}</td>
</tr>
{{/each}}
</table>
关于javascript - 试图了解 meteor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20590846/