试图理解流星

Trying to understand meteor

本文关键字：流星      更新时间：2023-09-26
<head>
  <title>bubblePop</title>
</head>
<body>

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

我了解车把 {{> hello}} 发生了什么，它基本上是这样您就可以在任何地方插入 {{> hello}}，它将与模板中的内容相同。但是我正在尝试使用javascript在我的meteor应用程序上制作一个大表。如何将我的代码放在车把中？我可以在 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;
}

如何显示所有这些按钮？有些东西我就是得不到

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

当数据更改时，模板将使用更新的数据隐式重新呈现。

尝试在车把中创建一个简单的循环，并将表绑定到集合。然后，您可以通过集合(或游标(控制行数或行顺序。

请记住，如果将模板

绑定到文档，则模板中的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/

相关文章：