Meteor-AutoForm: как обновить выбранные параметры на основе другого элемента управления

Question

Я трахал ТАК вопросы для ответа на что-то, что должно быть очень простым, но для моей жизни я не могу понять это.

В основном у меня есть метеор-автоформ с двумя выбранными элементами управления:

<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;

};

Теперь я знаю, что это не работает, потому что помощник не реагирует, однако я не знаю, как изменить это поведение. Я также пытался подключиться к событию 'change', но по какой-то причине это никогда не срабатывает:

Template.processFormTemplate.events({
 'change #elementId': function(e) {
  console.log($('[name="elementId"]').val() + ' is now selected');
}
});

Требуемое поведение заключается в том, что при выборе нового elementId в первом списке список параметров второго должен обновляться на основе выбранного elementId.

Любая помощь высоко ценится.

Спасибо Дэвид

Answer 1

У меня была та же проблема, прежде чем мне потребовались часы, чтобы ее решить. Вы должны использовать простую схему, чтобы получить значение выбранной опции, как это, используя API-вызов autoform 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 из-за проблем, возникших при использовании Autoform.getFieldValue в 5.0

Проблема в 5.0.3, о которой я сообщил aldeed: https://github.com/aldeed/meteor-autoform/issues/785

Answer 2

Мне удалось заставить это работать - несколько вещей были неправы:

1. Мне нужно было добавить 'id' в первый элемент управления select, чтобы я мог зафиксировать его событие изменения:

       {{> 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'));
  }

Надеюсь, это поможет кому-то еще, имеющему подобную проблему.