Meteor AutoForm:如何基于其他控件更新选择选项

Meteor-AutoForm: How to update select options based on another control

本文关键字：控件 更新 选择 选项 其他 何基于 AutoForm Meteor      更新时间：2024-04-20

我一直在搜索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进行刷新。

非常感谢您的帮助。

谢谢，David

我之前也遇到过同样的问题，花了几个小时才解决。您必须使用简单的模式来获得所选选项的值，如使用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
} 
});

顺便说一句，我还在用autoform@4.2.2由于在5.0 中使用Autoform.getFieldValue时遇到问题

5.0.3中的问题我已向alded报告：https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515

我已经设法让它工作起来了——有几件事是错误的：

  1. 我需要在第一个选择控件中添加一个"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'));
  }

希望这能帮助其他有类似问题的人。

相关文章：