Meteor 访问集合中的单个项目

Question

我不仅对 Meteor 还是对一般脚本都很陌生。我的程序有问题。我有一个收藏存储时间。我想每次都显示在它自己的 div 中。我有这样的收藏集。

Timeslots = new Mongo.Collection('times');
Timeslots.insert({Time: "8:00am"});
Timeslots.insert({Time: "8:30am"});
Timeslots.insert({Time: "9:00am"});
Timeslots.insert({Time: "9:30am"});

辅助函数

Template.Available.helpers({
    'newtime': function(){
        return Timeslots.find()
    }

});

我想每次访问都把它放在自己的 div 中。所以上午 8:00 的 div 一个 8:30 的 div 等等。

我的模板 html 是

<div class="col-sm-2 available open" id="opentime">
  <h2 class="time">                                                            
    {{#each newtime}}
    <p>{{Time}</p>
    {{/each}}
  </h2>
  <p class="text"></p><br>
  <p class="text"></p><br>
</div>

但是我有 20 次，所以有 20 个不同的 div。所以我如何访问集合中的值。其次，我应该如何更改此模板以使其访问正确的 div？感谢您的建议和意见。我确定我已经很远了。

Answer 1

只需在每个循环中包含 div：

<template name = "Available">
{{#each newtime}}
 <div class="col-sm-2 available open" id="opentime">
            <h2 class="time">                                                             
                 <p{{Time}}</p>
             </h2>
        </div>
{{/each}}
</template>

并且只包含一次 - 你不应该硬编码一堆 div，这就是流星为你做的工作！ :)

这也将允许反应性，因此您可以执行以下操作，例如打开另一个浏览器窗口到您的应用程序并在控制台中写入 Timeslots.insert({Time: "9:30am"});，如果仍然包含不安全和自动发布包，您可以在第一个浏览器窗口。

编辑：发现了几个小错误，例如在模板帮助程序中，您需要 Timeslots.find({})，括号内有额外的括号。此外，在循环中，您在 {{Time}} 处缺少括号 另外，请注意，您当前拥有的代码会在每次流星重新启动时将时间添加到数据库中，这很多。您应该检查一下数据库中是否有任何内容，然后添加种子数据。为此，请使用：

if (Timeslots.find().count() === 0) { 
  Timeslots.insert({ time: '8:30am' });
  Timeslots.insert({ time: '9:00am' });
 }

您可以随时使用meteor reset 清除数据库。

我已经编辑了您的项目，以使其达到我认为您想要的效果，虽然它并不完整，但足以让您克服当前的障碍。我取出了一些按钮，但您可以将它们添加回来，或者更好的是，只需将更改调整到您自己的代码中即可。你很亲近！！文件在这里：

https://www.dropbox.com/s/b162junes4usew4/teetimes-master.zip?dl=0

这应该足以让你开始！