如何将下拉值传递给模板帮助程序.[流星+火焰]

How to pass Drop Down value to a Template Helper. [Meteor + Blaze]

本文关键字:帮助程序 流星 火焰 值传      更新时间:2023-09-26

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

我试图使用 this.schemaNamedefaultTemplate.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};
       });
   }
 });

在这里看到我的答案

基本上,您在模板中创建一个反应式变量来存储下拉列表的"状态",在这种情况下,状态是选择的值。 然后,您有一个事件处理程序,该处理程序在值更改时更新状态(我会在下拉列表中同时使用clickchange,也许还有其他一些)。 最后,您有一个帮助程序,它根据状态返回一些信息。

您从帮助程序返回的信息因您使用这些信息的目的而异。 在某些情况下,您需要返回真/假类型响应,例如"应禁用此组件",但在其他情况下,例如您的,我认为您希望返回下拉列表的值并将该值实际传递给表模板。 然后,表模板应根据传入的值决定要显示的内容。 例如,如果我传入nullundefined,那么我的表可能会显示一个"禁用"表,上面有一个覆盖层,上面写着"未进行选择",但是如果我传入一个值,那么在订阅中使用该值来获取数据以填充表。 这样,无论传入什么值,表都应该始终能够显示某些内容。

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

}
});