试图理解流星答案

【问题标题】：Trying to understand meteor试图理解流星
【发布时间】：2014-01-02 15:48:42
【问题描述】：

<head>
  <title>bubblePop</title>
</head>

<body>


  <center>{{> hello}}<center>
</body>

<template name="hello">
  <h1>Bubble Pop!!!!</h1>
  {{greeting}}

</template>

我了解车把 {{> hello}} 的原理，因此您可以在任何地方插入 {{> hello}}，它与模板中的内容相同。但我正在尝试使用 javascript 在我的流星应用程序上制作一张大桌子。如何将代码放入车把？我可以在我的 JS 文件中使用<template> 吗？我的其余代码有点困惑： 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;
}

我怎样才能让所有这些按钮都出现？有些东西我只是不明白

【问题讨论】：

你读过这个吗？ discovermeteor.com
我正在读它我只是不知道我在做什么。
第 3 章 - 模板很好地解释了您的要求。
@cuberto 从今天下午开始我就读过这一章显然我无法弄清楚这一点几乎放弃了流星我不知道发生了什么无论我读了多少遍它和车把教程我无法弄清楚。我可以找出轨道我可以找出所有其他编程语言，但这对我来说太陌生了
这样想 - 不要担心创建元素并将它们附加到其他元素。您的模板定义 HTML 结构，其中包含在 {{ }} 中的变量。 Meteor 将渲染您的模板并在运行时填充这些变量。我强烈建议您查看其中一个示例。运行meteor create --example leaderboard。看看 HTML 和 JS 文件——它们很短而且看起来很容易理解。

标签： javascript jquery html css meteor

【解决方案1】：

您正在尝试将命令式编程技术应用于反应式范例。

当数据发生变化时，模板会隐式地使用更新后的数据重新渲染。

尝试在把手中创建一个简单的循环并将表格绑定到一个集合。然后通过集合（或游标）控制行数或行顺序。

请记住，如果您将模板绑定到文档，则模板中的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>

http://handlebarsjs.com/

【讨论】：

啊，没关系。我不知道这里说的是什么。 Meteor 对我来说太令人困惑了，我想谢谢你的回答。
当你第一次开始使用它时，一切都令人困惑。坚持下去。流星是游戏规则的改变者。未来几年在这个框架中会有很多工作。当您习惯它时，使用它也是一种真正的乐趣。可能是我的解释不太好。 :-)