如何将下拉值传递给模板助手。 [流星+火焰]

Question

我正在尝试创建一个模板，以便在开头有一个通过 mongo 填充的下拉列表。我有第二个模板，它显示一个表格，其中包含基于上述选择的更多详细信息。为了显示表格中的内容，我必须首先能够检索从下拉列表中选择的值。我该怎么做？

我尝试使用this.schemaName 和defaultTemplate.schemaName 检索它，但没有帮助。

模板：

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

助手：

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

看我的回答here

基本上，您可以在模板中创建一个响应式 var 来存储下拉菜单的“状态”，在这种情况下，状态就是被选中的值。然后你有一个事件处理程序，它随着值的变化更新状态（我会在下拉列表中同时使用click 和change，也许还有其他一些）。最后，您有一个帮助器，可以根据状态返回一些信息。

您从助手返回的信息因您使用它的目的而异。在某些情况下，您会希望返回一个真/假类型的响应，例如“应该禁用此组件”，但在其他情况下，例如您的情况，我认为您希望返回下拉列表的值并将该值实际传递给您的表模板。然后，您的表格模板应根据传入的值决定要显示的内容。例如，如果我传入null 或undefined，那么我的表格可能会显示一个“已禁用”表格，上面有一个“未进行选择”的覆盖，但如果我传入一个值，则在订阅以获取数据以填充表。这样，无论传入什么值，表格应该总是能够显示一些东西。

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


}
});