如何将下拉值传递给模板助手。 [流星+火焰]

Posted 2023-03-08

【中文标题】如何将下拉值传递给模板助手。 [流星+火焰]

【英文标题】：How to pass Drop Down value to a Template Helper. [Meteor + Blaze]

【发布时间】：2016-11-17 10:21:36

【问题描述】：

我正在尝试创建一个模板，以便在开头有一个通过 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;
       );
   
 );

【参考方案1】：

看我的回答here

基本上，您可以在模板中创建一个响应式 var 来存储下拉菜单的“状态”，在这种情况下，状态就是被选中的值。然后你有一个事件处理程序，它随着值的变化更新状态（我会在下拉列表中同时使用click 和change，也许还有其他一些）。最后，您有一个帮助器，可以根据状态返回一些信息。

您从助手返回的信息因您使用它的目的而异。在某些情况下，您会希望返回一个真/假类型的响应，例如“应该禁用此组件”，但在其他情况下，例如您的情况，我认为您希望返回下拉列表的值并将该值实际传递给您的表模板。然后，您的表格模板应根据传入的值决定要显示的内容。例如，如果我传入null 或undefined，那么我的表格可能会显示一个“已禁用”表格，上面有一个“未进行选择”的覆盖，但如果我传入一个值，则在订阅以获取数据以填充表。这样，无论传入什么值，表格应该总是能够显示一些东西。

【讨论】：

谢谢@CodeChimp。在考虑了很久之后，我确实最终做了类似于您在链接中提供的答案的事情。我没有设置真/假值，而是使用 Session.set 设置了一个 Session 变量，然后使用 Session.get 在帮助程序中检索它。

是的，关键是读取反应值的助手。由于 Session 是反应式的，因此它的工作方式相同。只有使用 Session 的 catch-22 是会话在模板重新加载后仍然存在（离开并返回该页面，您仍将选择相同的值）。这可能是可取的，但也可能不是，具体取决于您的用例。

【参考方案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;
);



);