Meteor-AutoForm：如何根据另一个控件更新选择选项

Posted 2023-03-08

【中文标题】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'));
  

希望这可以帮助遇到类似问题的其他人。