流星从集合中添加html元素答案

【问题标题】：Meteor adding html elements from collection流星从集合中添加html元素
【发布时间】：2015-11-25 20:46:33
【问题描述】：

我有需要在集合中显示的数据。我应该遍历集合并根据集合中的每个元素创建 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）。做这个的最好方式是什么？这可以用一个模板创建，然后根据集合插入每个模板吗？

感谢您的回答！

【问题讨论】：

如果您想创建多个模板，只需将它们包装在 if 语句中，如果您不想更改卡片的结构，则只需更改类即可。
我不确定你的意思。每个模板应该看起来像这样，具有不同的属性（标题等）。我设置它们没有问题。我不知道如何在 javascript 代码中添加它们并设置它们。

标签： jquery meteor meteor-blaze

【解决方案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，他们有一些很好的教程。

【讨论】：

感谢您的回答，但您不明白我的意思。我知道如何将数据添加到模板并注册事件和助手。问题是我需要插入多个模板（相同的结构）。不止一个。因此，循环遍历集合并为每个模板插入模板。示例：如果我的收藏有 10 个元素，我需要创建 10 个模板。我已经尝试过了，它只创建了 1 个模板。
@Wolf add {{each}} 在您的模板中查看更新的答案我添加了一个示例。
非常感谢。这就像一个魅力。我不知道 Meteor 中每个人的真正力量：D