如何将下拉值传递给模板帮助器。 [流星+烈焰]

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

在这里查看我的答案

基本上，您可以在模板中创建一个反应式var来存储下拉菜单的“状态”，在这种情况下，状态是所选的值。 然后，您将拥有一个事件处理程序，该处理程序会在值更改时更新状态（我会同时使用click和change下拉菜单，也许还有其他一些change ）。 最后，您有一个根据状态返回一些信息的助手。

您从助手返回的信息因您使用的目的而异。 在某些情况下，您将希望返回true / false类型的响应，例如“应禁用此组件”，但是在其他情况下，例如您，我想您想返回下拉列表的值并将该值实际传递给您的表模板。 然后，您的表模板应根据该传入值决定要显示的内容。 例如，如果我传入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};
});


}
});