[英]How to pass Drop Down value to a Template Helper. [Meteor + Blaze]
I'm trying to create a template such that there is a drop down list at the beginning being populated via mongo. 我正在尝试创建一个模板,以便在开始时通过mongo填充一个下拉列表。 I have a second template that displays a table which contains further details based on the selection made above.
我还有第二个模板,该模板显示一个表,该表包含基于上述选择的更多详细信息。 For me to display the contents in the table, I must first be able to retrieve the value that has been selected from the dropdown.
为了让我显示表格中的内容,我必须首先能够检索从下拉列表中选择的值。 How exactly do I do that?
我该怎么做?
I tried to retrieve it using this.schemaName
and defaultTemplate.schemaName
, however it didn't help. 我尝试使用
this.schemaName
和defaultTemplate.schemaName
检索它,但是没有帮助。
Template: 模板:
<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>
Helper: 帮手:
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};
});
}
});
Basically, you create a reactive var in your template to store the "state" of the dropdown, the state in this case being the value that is selected. 基本上,您可以在模板中创建一个反应式var来存储下拉菜单的“状态”,在这种情况下,状态是所选的值。 You then have an event handler that updates the state as the value changes (I would use both
click
and change
on the dropdown, maybe a few others). 然后,您将拥有一个事件处理程序,该处理程序会在值更改时更新状态(我会同时使用
click
和change
下拉菜单,也许还有其他一些change
)。 Finally you have a helper that returns some info based on the state. 最后,您有一个根据状态返回一些信息的助手。
The info you return from your helper varies based on what you are using it for. 您从助手返回的信息因您使用的目的而异。 In some cases you will want to return a true/false type response, like "this component should be disabled", but in other cases, like yours, I think you want to return the value of the dropdown and actually pass that value to your table template.
在某些情况下,您将希望返回true / false类型的响应,例如“应禁用此组件”,但是在其他情况下,例如您,我想您想返回下拉列表的值并将该值实际传递给您的表模板。 Your table template should then decide what to display based on that passed-in value.
然后,您的表模板应根据该传入值决定要显示的内容。 For instance, if I pass in
null
or undefined
, then my table would maybe display a "disabled" table with an overlay saying "No selection made", but if I pass in a value, then use that value in a subscription to get the data to populate the table. 例如,如果我传入
null
或undefined
,那么我的表可能会显示一个“已禁用”表,上面有一个覆盖层,上面写着“未进行选择”,但是如果我传入一个值,则在订阅中使用该值来获取数据以填充表。 In this way, no matter what value is passed in, the table should ALWAYS be able to display something. 这样,无论传入什么值,表都应该始终能够显示内容。
<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 : 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};
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.