Meteor-AutoForm:如何根据另一个控件更新选择选项 [英] Meteor-AutoForm: How to update select options based on another control
问题描述
我一直在寻找SO问题的答案，这些问题应该非常简单，但对于我的生活，我无法弄清楚.
基本上我有一个带有两个选择控件的流星自动成型:
{{#autoForm id="processForm" collection="Processes" type=formAction doc=doc validation="blur"}}<div class="col-md-12">{{>afQuickField name="elementId" options=elements}}{{>afQuickField name="categoryId" options=categories}}{{>afQuickField name="title"}}{{>afQuickField name="desc" rows=4}}{{> 表单按钮}}{{/autoForm}}
这些然后有帮助填充选项:
Template.processFormTemplate.helpers({元素:函数(){返回 getFormElements();},类别:功能(元素ID){返回 getFormCategories(this.doc.elementId);}});lib/methods.js
getFormElements = function() {var 选项 = [];Elements.find({}, {sort: {ref:1}}).forEach(function (element) {options.push({标签:element.title，值:element._id});});退货选项；};getFormCategories = function(elementId) {var 选项 = [];无功过滤器 = {};如果 (!isBlank(elementId)) {filter.elementId = elementId;}Categories.find(filter, {sort: {ref:1}}).forEach(function (d) {options.push({标签:d.title，值:d._id});});退货选项；};现在我知道这不起作用，因为助手没有反应，但是我不知道如何改变这种行为.我也试过挂钩到更改"事件，但由于某种原因从未触发:
Template.processFormTemplate.events({'改变#elementId':函数(e){console.log($('[name="elementId"]').val() + ' 现在被选中');}});所需的行为是，当在第一个列表中选择新的 elementId 时，应根据所选的 elementId 刷新第二个中的选项列表.
非常感谢任何帮助.
谢谢，大卫
我之前也遇到过同样的问题，我花了几个小时才解决.您必须使用简单的架构来使用 autoform 的 api 调用 Autoform.getFieldValue:
Schemas.Store = new SimpleSchema({中央: {类型:字符串，可选:真，自动成型:{类型:选择"，选项:函数(){返回 Centers.find().map(function (c) {返回{标签:c.name，值:c._id}；});}}},地区: {类型:字符串，可选:真，自动成型:{类型:选择"，选项:函数(){如果(流星.isClient){var docId = '';docId = AutoForm.getFieldValue('storesForm', 'center');返回 Regions.find({center: docId}).map(function (c) {return {label: c.name + '(' + c.code + ')', value: c._id};});}}}},商店名称:{类型:字符串}});顺便说一句，由于在 5.0 中使用 Autoform.getFieldValue 时遇到问题，我仍在使用 autoform@4.2.2
我已向 aldeed 报告了 5.0.3 中的问题:https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515
I've been trawling SO questions for an answer to something that should be very simple but for the life of me I cannot figure it out.
Basically I have a meteor-autoform with two select controls:
<template name="processFormTemplate">
{{#autoForm id="processForm" collection="Processes" type=formAction doc=doc validation="blur"}}
<div class="col-md-12">
{{> afQuickField name="elementId" options=elements}}
{{> afQuickField name="categoryId" options=categories}}
{{> afQuickField name="title"}}
{{> afQuickField name="desc" rows=4}}
</div>
{{>formButtons}}
{{/autoForm}}
</template>
These then have helpers to populate the options:
Template.processFormTemplate.helpers({
elements: function() {
return getFormElements();
},
categories: function(elementId) {
return getFormCategories(this.doc.elementId);
}
});
lib/methods.js
getFormElements = function() {
var options = [];
Elements.find({}, {sort: {ref:1}}).forEach(function (element) {
options.push({
label: element.title, value: element._id
});
});
return options;
};
getFormCategories = function(elementId) {
var options = [];
var filter = {};
if (!isBlank(elementId)) {
filter.elementId = elementId;
}
Categories.find(filter, {sort: {ref:1}}).forEach(function (d) {
options.push({
label: d.title, value: d._id
});
});
return options;
};
Now I know this isn't working because the helper isn't reactive, however I don't know how to change this behaviour. I've also tried hooking into the 'change' event but this never fires for some reason:
Template.processFormTemplate.events({
'change #elementId': function(e) {
console.log($('[name="elementId"]').val() + ' is now selected');
}
});
The required behaviour is that when a new elementId is selected in the first list, the list of options in the second should be refreshed based on the selected elementId.
Any help much appreciated.
Thanks, David
I had the same problem before that took me hours to resolve. You have to use simple schema to get the value of selected option like this using autoform's api call Autoform.getFieldValue:
Schemas.Store = new SimpleSchema({
center: {
type: String,
optional: true,
autoform: {
type: "select",
options: function () {
return Centers.find().map(function (c) {
return {label: c.name, value: c._id};
});
}
}
},
region: {
type: String,
optional: true,
autoform: {
type: "select",
options: function () {
if (Meteor.isClient) {
var docId = '';
docId = AutoForm.getFieldValue('storesForm', 'center');
return Regions.find({center: docId}).map(function (c) {
return {label: c.name + ' (' + c.code + ')', value: c._id};
});
}
}
}
},
store_name: {
type: String
}
});
BTW, I'm still using autoform@4.2.2 due to issues encountered when using Autoform.getFieldValue in 5.0
Issue in 5.0.3 I've reported to aldeed: https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515
这篇关于Meteor-AutoForm:如何根据另一个控件更新选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
