How to use a collection in a handlebars helper

Question

I am using a handlebars helper with autoform on Meteor.js. I am trying to make a selection dropdown box on my form, but I would like the options to come from a collection instead of an array. I have defined my collection "Persons" using the collection2 package and defined the schema with simple-schema. I have inserted two Persons with firstName, lastName, fullName values.

Here is my Helper:

Handlebars.registerHelper("personSelectOption", function(options) {
peeps = Persons.find().fetch();

peeps.forEach(function(persons){

  return [ 
  {label:persons.firstName , value:persons.firstName}
 ];
});
});

I am trying to make the dropdown box show the firstName of each Person I have in my collection and as I add more Persons to the collection it will automatically show in the dropdown box.

I know I'm missing a lot here, but I'm a new coder, and any help I can get would be great.

Thanks!

I was trying to use the handlebars helper because the only good example I saw of using autoform was also using this helper. The dropdown box in autoforms uses this:

 <div class="form-group {{afHasError 'firstOptionSelect'}}">
        {{afFieldLabel 'firstOptionSelect'}}
        {{afFieldInput 'firstOptionSelect' firstOption="(Select Something)" options=personSelectOption}}
        {{#if afFieldIsInvalid 'firstOptionSelect'}}
        <span class="help-block">{{afFieldMessage 'firstOptionSelect'}}</span>
        {{/if}}
      </div>

The options is where I was trying to get the firstName to appear. And the forEach was to get every first name in the collection. How can I use the meteor syntax to work with autoforms without using a handlebars helper?

Thanks

Answer 1

As Cuberto says, Meteor gives you the ability to add a helper to the template using Meteor's own syntax. It's also not clear what you're trying to do with the forEach block, but something like this should work:

Template.myTemplate.helpers({
  personSelectOption: function() {
    return Persons.find().fetch();
  }
});

Then you can access the information you want in the html with something like the following:

<template name="myTemplate">
  <select>
    {{#each personSelectOption}}
      <option value="{{this.firstName}}">{{this.firstName}}</option>
    {{/each}}
  </select>
</template>

You can access whichever of the document's properties you need within the template without having to build some special structure and returning that from the helper. Although if you really do want to do that (because you need to mutate the properties in some way, for example), you should be using map rather than forEach to return a single array of the modified objects.

Answer 2

This is what ended up working for me:

The handlebars helper:

Handlebars.registerHelper("personSelect", function() {

peeps = Persons.find();


people = peeps.map(function(peeps) {

return {label:peeps.fullName, value:peeps.fullName };

});
return people;
});

And for the autoform template:

 <div class="form-group {{afHasError 'firstOptionSelect'}}">
        {{afFieldLabel 'firstOptionSelect'}}
        {{afFieldInput 'firstOptionSelect' firstOption="(Select Something)" options= personSelect  }}
        {{#if afFieldIsInvalid 'firstOptionSelect'}}
        <span class="help-block">{{afFieldMessage 'firstOptionSelect'}}</span>
        {{/if}}
      </div>

I am not using the Meteor Template.helper because I would need the template to show within the autoform template. I have not found a way to do this so I decided to use the handlebars.helper instead. If anyone knows how to do it that way, I'm all ears.