Javascript 在meteor上插入按钮网格_Javascript_Jquery_Meteor

Javascript 在meteor上插入按钮网格

javascript jquery meteor

Javascript 在meteor上插入按钮网格,javascript,jquery,meteor,Javascript,Jquery,Meteor,我最近刚开始使用meteor，试图弄明白如何在上面工作。这件事我已经做了好几天了。我正在阅读《发现流星》并试图找出模板是如何工作的。我做错了什么？如何使按钮网格显示 JS/jQuery： if (Meteor.isClient) { Template.bubbles.grid = function () { var el; for(var i=1; i<=64; i++){ return el = document.createElement('div'

我最近刚开始使用meteor，试图弄明白如何在上面工作。这件事我已经做了好几天了。我正在阅读《发现流星》并试图找出模板是如何工作的。我做错了什么？如何使按钮网格显示

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 () {

  });
}

HTML:


泡泡壶
{{>你好}
你好，世界！
{{>网格}

对我来说，这肯定是一件非常新鲜和具有挑战性的事情。我走对了吗？我需要做些什么才能使我的网格显示出来，以及网格是否会在meteor服务器上更新？

当您手动创建DOM元素时，您知道自己做错了什么。这不是模板式的做事方式，当然也不是流星式的做事方式。您的代码中还存在一些常规javascript错误（“return el..”）

尝试类似的方法（未经测试）：


{{{#每个按钮}
按钮{{value}}
{{/每个}}

以及：

Template.grid.buttons=函数（）{
var列表=[]；
for（var i=1；IlRight@christianf将其放入我的if（Meteor.isClient）spot和它似乎仍然不起作用谢谢你的连续否决我！你的代码一点帮助都没有，我会自己解决的谢谢你的辛勤工作！我只否决了你一次，我留下了一条解释它的文字。所以不要声称其他。再次，如果你不需要帮助，请不要来这里。比“似乎不起作用”。你有错误吗？
#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;
}

<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>

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