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

Question

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

我尝试使用 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

看我的回答

基本上，您在模板中创建一个响应式变量来存储下拉列表的 "state"，在这种情况下，状态是所选的值。然后你有一个事件处理程序，它在值更改时更新状态（我会在下拉列表中同时使用 click 和 change，也许还有其他几个）。最后你有一个助手，returns 一些基于状态的信息。

您从助手那里 return 获得的信息因您的用途而异。在某些情况下，你会想要 return 一个 true/false 类型的响应，比如 "this component should be disabled"，但在其他情况下，比如你的，我想你想要 return下拉列表并将该值实际传递给您的 table 模板。然后，您的 table 模板应根据传入的值决定显示什么。例如，如果我传入 null 或 undefined，那么我的 table 可能会显示一个 "disabled" table 和一个叠加层 "No selection made"，但是如果我传入一个值，然后在订阅中使用该值来获取数据以填充 table。这样，无论传入什么值，table 应该总是能够显示一些东西。

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


}
});

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

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

javascript

mongodb

meteor

meteor-blaze

meteor-helper