Meteor-AutoForm:如何根据另一个控件更新选择选项
Posted
技术标签:
【中文标题】Meteor-AutoForm:如何根据另一个控件更新选择选项【英文标题】:Meteor-AutoForm: How to update select options based on another control 【发布时间】:2015-04-25 10:45:39 【问题描述】:我一直在寻找 SO 问题的答案,这些问题应该很简单,但对于我的生活,我无法弄清楚。
基本上我有一个带有两个选择控件的流星自动窗体:
<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>
然后这些有帮助填充选项:
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;
;
现在我知道这不起作用,因为帮助器没有反应,但是我不知道如何改变这种行为。我也尝试过加入“更改”事件,但由于某种原因这永远不会触发:
Template.processFormTemplate.events(
'change #elementId': function(e)
console.log($('[name="elementId"]').val() + ' is now selected');
);
要求的行为是,当在第一个列表中选择一个新的 elementId 时,第二个中的选项列表应根据所选的 elementId 刷新。
非常感谢任何帮助。
谢谢, 大卫
【问题讨论】:
【参考方案1】:在我花了几个小时解决之前,我遇到了同样的问题。您必须使用简单的模式来使用 autoform 的 api 调用 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
);
顺便说一句,由于在 5.0 中使用 Autoform.getFieldValue 时遇到问题,我仍在使用 autoform@4.2.2
我已向 aldeed 报告 5.0.3 中的问题:https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515
【讨论】:
您好 - 感谢您的回答...您将如何在需要相同行为的多个表单中使用您的解决方案? @Woppi 好奇为什么你的区域自动生成选项函数中有 if (Meteor.isClient()) ......? @Wes 这是因为 getFieldValue 是 autoform 的仅限客户端的 API 调用。 :) 这里:github.com/aldeed/meteor-autoform/blob/devel/… 谢谢...我只是想了解一下诸如自动表单选项功能之类的东西,以及当它们运行时..如果我在自动表单选项功能中放置一个console.log,一般来说,我只看到客户端上显示的日志语句,但有时我看到服务器上显示的日志语句...对我来说很奇怪,仅此而已!【参考方案2】:我已经设法让它工作了——有几件事是错误的:
我需要在第一个选择控件中添加一个“id”,以便捕获它的更改事件:
> afQuickField name="elementId" id="elementId" options=elements
然后我使用了一个 Reactive Dict 变量,然后我在更改的事件中设置了该变量。会话变量可能会做同样的工作。
Template.processFormTemplate.events(
'change #elementId': function()
dict.set('activeElementId', $('select#elementId').val());
);
并将其用作我的类别助手中的参数:
categories: function(elementId)
return getFormCategories(dict.get('activeElementId'));
希望这可以帮助遇到类似问题的其他人。
【讨论】:
以上是关于Meteor-AutoForm:如何根据另一个控件更新选择选项的主要内容,如果未能解决你的问题,请参考以下文章