在流星上插入扣子格
在流星上插入扣子格
提问于 2013-12-16 03:20:28
我最近才开始使用流星试图找出如何使事情在它上工作。我已经为此做了几天了。我正在阅读“发现流星”，并试图找出模板是如何工作的。我在这里做错什么了？如何使按钮网格出现？
JS/jQuery：
if (Meteor.isClient) {
Template.bubbles.grid = function () {
var el;
for(var i=1; i<=64; i++){
return el = document.createElement('div');
$(el).addClass('button');
$(el).on('click', function(){
$(this).addClass('removed');
});
$('#container').append(el);
}
};
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 () {
});
}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;
}HTML：
<head>
<title>bubblepopper</title>
</head>
<body>
{{> hello}}
</body>
<template name ="grid">
<div id="container"></div>
</template>
<template name="hello">
<h1>Hello World!</h1>
{{> grid}}
</template>当然，对我来说，这是一件全新的挑战，我是否走上了正确的轨道？我需要做什么来使我的网格出现，并且网格也会被更新到流星服务器上？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-12-16 03:39:13
当您手动创建DOM元素时，您知道您正在做一些错误的事情。这不是做事情的模板方式，也不是流星的方式。您的代码中还有一些常见的javascript错误(“返回el ..？”)
试一试这样的方法(未经测试)：
<template name ="grid">
{{#each buttons}}
<div class='button'>button {{value}}</div>
{{/each}}
</template>和：
Template.grid.buttons = function () {
var list = [];
for(var i=1; i<=64; i++){
list.push({value: i});
}
return list;
};
Template.grid.events({
'click .button': function(ev) {
$(ev.target).addClass('removed');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20602918
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号