CODEWITHSUNDEEP
javascriptmeteor
Andy Schoenherr
Andy Schoenherr

Reputation: 15

Meteor Accessing a single item in a collection

I am very new to not only Meteor but script in general. I am having issues with a program. I have a collection storing times. I want to display each time in it's own div. I have the collection set like this.

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"});

A helper function

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

});

I want to access each time to put it in its own div. So a div for 8:00am one for 8:30 etc.

My template html is

<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>

However I have 20 times so 20 different divs. So one how do i access the value in the collection. Second how should I be changing this template so that it accesses the correct div? Thank you for advice and input. I am sure I am way off.

Upvotes: 1

Views: 165

Answers (1)

Jordan Davis
Jordan Davis

Reputation: 1327

Just include the div in your each loop:

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

And only include once - you shouldn't be hard coding a bunch of divs, that's the kind of work meteor exists to do for you!! :)

This will also allow for reactivity, so you can do things like open another browser window to your app and in the console write Timeslots.insert({Time: "9:30am"}); and if the insecure and autopublish packages are still included, you can watch the list change in the first browser window.

EDIT: found a couple small errors, such as in the template helper, you need Timeslots.find({}) with the extra parens inside the brackets. Aslo, in the loop, you are missing a parentheses at {{Time}} Also, be mindful that the code you have currently is adding the times to the DB everytime meteor restarts, which is a lot. You should do a check and see if there is anything in the db, and then add the seed data. To do that use:

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

You can always use meteor reset to clear out the db in the meantime.

I've edited your project to get it to where it's doing what I think you want, it's not complete, but it's enough to get you past the block you are at. I took out some of the buttons, but you can add them back, or better yet, just adapt the changes into your own code. You were very close!! The file is here:

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

That should be enough to get you started!

Upvotes: 0

Related Questions