如何将下拉值传递给模板帮助程序.[流星+火焰]
How to pass Drop Down value to a Template Helper. [Meteor + Blaze]
我正在尝试创建一个模板,以便在开始时有一个下拉列表通过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};
});
}
});
在这里看到我的答案
基本上,您在模板中创建一个反应式变量来存储下拉列表的"状态",在这种情况下,状态是选择的值。 然后,您有一个事件处理程序,该处理程序在值更改时更新状态(我会在下拉列表中同时使用click
和change
,也许还有其他一些)。 最后,您有一个帮助程序,它根据状态返回一些信息。
您从帮助程序返回的信息因您使用这些信息的目的而异。 在某些情况下,您需要返回真/假类型响应,例如"应禁用此组件",但在其他情况下,例如您的,我认为您希望返回下拉列表的值并将该值实际传递给表模板。 然后,表模板应根据传入的值决定要显示的内容。 例如,如果我传入null
或undefined
,那么我的表可能会显示一个"禁用"表,上面有一个覆盖层,上面写着"未进行选择",但是如果我传入一个值,那么在订阅中使用该值来获取数据以填充表。 这样,无论传入什么值,表都应该始终能够显示某些内容。
<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};
});
}
});
相关文章:
- {{#each}}内部的Handlebar帮助程序
- Handlebars帮助程序未获取变量的值
- Node Express Handlebars帮助程序未返回函数的结果
- 如何让应用程序帮助程序方法在发送的请求为 JS 格式时工作
- 从帮助程序异步返回值
- 无法使用模板帮助程序设置正文类
- 在呈现模板之前调用帮助程序
- 花式框 V2 按钮帮助程序冲突
- 在帮助程序处获取对象值的车把,无需使用数据进行编译
- {{outlet}}、{{yield}、}{render}和{{partial}的ember帮助程序之间存在差异
- 模板帮助程序在session.set之后未更新
- 引导程序窗体帮助程序-状态选择器-选择类
- 如何在HTMLBars中编写帮助程序
- 在帮助程序函数中使用 for 循环的正确方法 |流星
- 在帮助程序外部未定义的客户端上获取流星
- 流星:通过 DDP 连接两个应用程序时,模板帮助程序中没有来自远程集合的文档
- 使用帮助程序的流星条件 HTML
- 流星中非模板特定的帮助程序应该放在哪里?
- 在流星表格中使用集合帮助程序
- 如何将下拉值传递给模板帮助程序.[流星+火焰]