如何从下拉菜单中检索选定的值并将其传递给流星中的模板帮手

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，也可能使用其他几个）。最后，你有一个帮助者，根据状态返回一些信息。

您从助手返回的信息因您使用的信息而异。在某些情况下，您希望返回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}; 
}); 


} 
});