How to pass Drop Down value to a Template Helper. [Meteor + Blaze]

Question

I'm trying to create a template such that there is a drop down list at the beginning being populated via mongo. I have a second template that displays a table which contains further details based on the selection made above. For me to display the contents in the table, I must first be able to retrieve the value that has been selected from the dropdown. How exactly do I do that?

I tried to retrieve it using this.schemaName and defaultTemplate.schemaName , however it didn't help.

Template:

<template name ='defaultTemplate'>

    <div class="form-group" data-required="true">
        <label for="Schema" class="control-label">Select the Schema</label>
        <select required="true"  class="form-control">
            <!-- <option default>Select Schema </option> -->
            {{ #each schemaNames}}
            <option >{{schemaName}}</option>
            {{/each}}
        </select>
        <span class="help-block"></span>
    </div>
    {{> tableTemplate}}
</template>

<template name="tableTemplate">

    <table class="table table-bordered table-condensed">
      <thead>
        <tr>
          <td style="width: 85px">Label</td>
          <td>Current Value</td>
          <td style="width: 250px">New Value</td>
        </tr>
      </thead>
      <tbody>
        {{#each schemaLabels}}
          <tr>
            <td>{{this.label}}</td>
            <td>{{this.value}}</td>
            <td>
            {{#autoForm id=makeUniqueID type="update" collection=Defaults doc=this autosave=true}}
              {{> afFormGroup name="value" label=false}}
            {{/autoForm}}
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
</template>

Helper:

import { Template } from 'meteor/templating';
import '../templates/defaultTemplate.html';

Template.defaultTemplate.helpers({
   schemaNames: function () {
       return Defaults.find({},{schemaName:1}).map(function(c) {return {schemaName : c.schemaName};
       });
   },
   schemaLabels: function() {
       var selectedSchema = defaultTemplate.schemaName;
      // alert (selectedSchema); >>>>>>>>>> Displays Undefined <<<<<<<<<<<
       return Defaults.find({schemaNeme:selectedSchema},{schemaName:0,_id:0}).map(function(c) {return {label : c.label, value: c.value};
       });
   }
 });

Answer 1

See my answer here

Basically, you create a reactive var in your template to store the "state" of the dropdown, the state in this case being the value that is selected. You then have an event handler that updates the state as the value changes (I would use both click and change on the dropdown, maybe a few others). Finally you have a helper that returns some info based on the state.

The info you return from your helper varies based on what you are using it for. In some cases you will want to return a true/false type response, like "this component should be disabled", but in other cases, like yours, I think you want to return the value of the dropdown and actually pass that value to your table template. Your table template should then decide what to display based on that passed-in value. For instance, if I pass in null or undefined , then my table would maybe display a "disabled" table with an overlay saying "No selection made", but if I pass in a value, then use that value in a subscription to get the data to populate the table. In this way, no matter what value is passed in, the table should ALWAYS be able to display something.

Answer 2

<template name ='defaultTemplate'>

<div class="form-group" data-required="true">
    <label for="Schema" class="control-label">Select the Schema</label>
    <select required="true"  class="form-control">
        <!-- <option default>Select Schema </option> -->
        {{ #each schemaNames}}
        <option >{{schemaName}}</option>
        {{/each}}
    </select>
    <span class="help-block"></span>
</div>
//you need to pass the reactive var that contains selected schema name to tableTemplate
{{> tableTemplate selectedSchemaVar=getSelectedSchemaVar}}
</template>

<template name="tableTemplate">

<table class="table table-bordered table-condensed">
  <thead>
    <tr>
      <td style="width: 85px">Label</td>
      <td>Current Value</td>
      <td style="width: 250px">New Value</td>
    </tr>
  </thead>
  <tbody>
    {{#each schemaLabels}}
      <tr>
        <td>{{this.label}}</td>
        <td>{{this.value}}</td>
        <td>
        {{#autoForm id=makeUniqueID type="update" collection=Defaults doc=this autosave=true}}
          {{> afFormGroup name="value" label=false}}
        {{/autoForm}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>
</template>

JS :

import { Template } from 'meteor/templating';
import '../templates/defaultTemplate.html';


Template.defaultTemplate.onCreated(function(){
this.selectedSchema = new ReactiveVar();
})
Template.defaultTemplate.events({
"change .form-control":function(evt,temp){
t.selectedSchema.set(evt.target.value)
}
})
Template.defaultTemplate.helpers({
schemaNames: function () {
   return Defaults.find({},{schemaName:1}).map(function(c) {return {schemaName : c.schemaName};
   });
 },
getSelectedSchemaVar:function(){
return Template.instance().selectedSchema
}
})
Template.tableTemplate.helpers({
 schemaLabels: function() {
 var selectedSchema = `Template.instance().data.selectedSchemaVar.get();`
return Defaults.find({schemaNeme:selectedSchema},{schemaName:0,_id:0}).fetch().map(function(c) {return {label : c.label, value: c.value};
});


}
});