如何從下拉菜單中檢索選定的值並將其傳遞給流星中的模板幫手

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


} 
});