Meteor-AutoForm: Como atualizar opções selecionadas com base em outro controle
Eu tenho procurado perguntas de SO para uma resposta a algo que deve ser muito simples, mas para a minha vida eu não consigo descobrir.
Basicamente, tenho um formulário automático de meteoro com dois controles selecionados:
<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>
Estes têm ajudantes para preencher as opções:
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;
};
Agora eu sei que isso não está funcionando porque o auxiliar não é reativo, no entanto, não sei como alterar esse comportamento. Eu também tentei me conectar ao evento 'change', mas isso nunca é acionado por algum motivo:
Template.processFormTemplate.events({
'change #elementId': function(e) {
console.log($('[name="elementId"]').val() + ' is now selected');
}
});
O comportamento necessário é que, quando um novo elementId for selecionado na primeira lista, a lista de opções na segunda seja atualizada com base no elementId selecionado.
Qualquer ajuda muito apreciada.
Obrigado David