Meteor-AutoForm: So aktualisieren Sie ausgewählte Optionen basierend auf einem anderen Steuerelement

Ich habe SO Fragen nach einer Antwort auf etwas durchsucht, das sehr einfach sein sollte, aber für mein Leben kann ich es nicht herausfinden.

rundsätzlich habe ich eine Meteor-Autoform mit zwei ausgewählten Steuerelementen:

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

Diese haben dann Helfer, um die Optionen auszufüllen:

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;

};

Jetzt weiß ich, dass dies nicht funktioniert, da der Helfer nicht reaktiv ist, aber ich weiß nicht, wie ich dieses Verhalten ändern soll. Ich habe auch versucht, mich in das "change" -Ereignis einzuklinken, aber dies wird aus irgendeinem Grund nie ausgelöst:

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

Wenn in der ersten Liste eine neue Element-ID ausgewählt wird, muss die Liste der Optionen in der zweiten Liste basierend auf der ausgewählten Element-ID aktualisiert werden.

Jede Hilfe sehr geschätzt.

Danke, David

Antworten auf die Frage(4)

Ihre Antwort auf die Frage