Question

我最近才开始尝试使用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 () {

  });
}

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>

对我来说绝对是一件非常新鲜和具有挑战性的事情我是在正确的轨道上吗？我需要做什么才能使我的网格出现，并且还要在流星服务器上更新网格？

Answer 1

当您手动创建DOM元素时，您知道自己做错了什么。这不是模板的做事方式，也绝对不是流星方式。你的代码中也有一些常见的javascript错误（＆＃34; return el ..＆＃34;？）

尝试这样的事情（未经测试）：

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

在流星上插入按钮网格

1 个答案: