javascript - 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中。因此，一个 div 为上午 8:00，一个 div 为 8:30，依此类推。

我的模板 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 进行硬编码，这就是 Meteor 为你做的工作! :)

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

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

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

这应该足以让您开始!