Question

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

感谢您的回答！

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从集合中添加html元素

1 个答案: