How do I pass collection information through #each block in Meteor?

Question

I am populating a drop down menu with different items in a Meteor Collection Cases.

  <select id="caseChoice">
   {{#each case}}
     <option>{{name}}</option>
   {{/each}}
  </select>

I get the value of the selection, aka the name by:

 var caseName = document.getElementById("caseChoice").value;

And I can retrieve the id of the case by using:

 var caseID = Cases.findOne({name:caseName})._id;

However I am planning on letting users create cases with the same name. Is their a way to pass the id through the {{each}} without displaying the _id in the drop down selection?

Answer 1

If you mean that you would like each html tag to contain the id, you could do it using the option's value attribute, or alternatively, by using html5 data attributes:

{{#each case}}
  <option value="{{_id}}" data-id="{{_id}}">{{name}}</option> // can use value= or data-id=
{{/each}}

This will be visible in the browser's source code, but not on screen to the user. Alternatively, if you want to access the id through template events, it will be available there as well:

"click option" /*or whatever event handler is appropriate here*/: function(event, template){
  var id = template.data._id;
  /* alternatively you can call this._id which will generally give you the same result */
  /* then do your event handling, etc. */ 
}