Meteor 从 collection 添加 html 个元素

Question

我有数据需要在collection中显示。我应该遍历 collection 并根据 collection.

中的每个元素创建 html 元素

我想在 html 代码中插入看起来像这样的卡片。

    <div class="card #66bb6a green lighten-1">
       <div class="card-content white-text">
          <span class="card-title">{{ title }}</span>
          {{#if currentUser}}
             <p>{{ currentUser }}</p>
          {{/if}}
       </div>
       <div class="card-action">
          <a class="card-nav" href="#">Navigation</a>
          <a class="card-remove" href="#">Remove</a>
       </div>
    </div>

请注意，点击事件应该发生在两个元素上 (card-nav、card-remove)。做这个的最好方式是什么？这可以用一个模板创建，然后根据 collection 插入每个模板吗？

感谢解答！

Answer 1

您应该添加助手示例：

Template.your_template_name.helpers({ //getting the data from collection and assign it to a helper
  yourdata: function() {
    return some_collection.find({});
  }
});

然后在你的火焰中像这样添加它

<div class="card #66bb6a green lighten-1">
   <div class="card-content white-text">
      <span class="card-title">{{ yourdata.title }}</span> //asign youdata.title 
        {{#if currentUser}}
           <p>{{ currentUser }}</p>
        {{/if}}
   </div>
   <div class="card-action">
     <a class="card-nav" href="#">Navigation</a>
       <a class="card-remove" href="#">Remove</a>
   </div>
</div>

为了删除或导航您添加事件

Template.your_template_name.events({
    "click .card-remove": function () {         
      some_collection.remove(this._id);
    }
 })

你可以对每个人都这样做在您的主模板中添加

{{#each yourdata}}
    {{> your_template_name}}
{{/each}}


<template name="your_template_name">
  <div class="card #66bb6a green lighten-1">
       <div class="card-content white-text">
          <span class="card-title">{{ title }}</span>
          {{#if currentUser}}
             <p>{{ currentUser }}</p>
          {{/if}}
       </div>
       <div class="card-action">
          <a class="card-nav" href="#">Navigation</a>
          <a class="card-remove" href="#">Remove</a>
       </div>
    </div>
</template>

我建议查看 meteor.com 他们有一些很好的教程。

Meteor 从 collection 添加 html 个元素

Meteor adding html elements from collection

jquery

meteor

meteor-blaze