Question

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

<body>


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

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

</template>

我了解车把的最新情况{{＆gt;你基本上可以插入{{＆gt; 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;
}

如何才能显示所有这些按钮？有些东西我不知道

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

试图了解流星

1 个答案: