ドロップダウンから選択した値を取得して流星のテンプレートヘルパーに渡す方法

Question

最初にドロップダウンリストがmongoを介して入力されるようにテンプレートを作成しようとしています。私は上記の選択に基づいて詳細を含むテーブルを表示する2番目のテンプレートを持っています。私がテーブルに内容を表示するには、まずドロップダウンから選択した値を取得する必要があります。どのように私はそれを正確に行うのですか？

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


} 
});