2015-02-23 2 views
5

Я травля SO вопросов для ответа на что-то, что должно быть очень просто, но для жизни меня я не могу понять.Meteor-AutoForm: как обновить опцию выбора на основе другого элемента управления

В принципе у меня есть метеоритный-AUTOFORM с двумя отборных управления:

<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 выбран в первом списке, список опций в секунду должен быть обновлен на основе выбранного элемента.

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

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

ответ

12

У меня была такая же проблема, прежде чем это заняло у меня часы, чтобы решить. Вы должны использовать простую схему, чтобы получить значение выбранного параметра, как апите вызов Autoform.getFieldValue это с помощью AUTOFORM в:

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

Кстати, я до сих пор использую [email protected] из-за проблемы, возникающих при использовании AUTOFORM. getFieldValue в 5,0

Проблема в 5.0.3 я доложил aldeed: https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515

+1

Это решение работает отлично подходит для меня. Благодаря! – Aaron

+2

привет - спасибо за ответ ... как бы вы использовали свое решение в нескольких формах, требующих такого же поведения? – dsc

+0

@Woppi Любопытно, почему у вас есть (Meteor.isClient()) в вашей функции автоформата области ...? – Wes

5

мне удалось получить эту работу - пара вещей ошибались:

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

    {{> afQuickField name="elementId" id="elementId" options=elements}} 
    

затем я использовал переменную Реактивная Dict, которую я тогда s et в измененном событии. Переменная сеанса, вероятно, будет выполнять ту же работу.

Template.processFormTemplate.events({ 
'change #elementId': function() { 
    dict.set('activeElementId', $('select#elementId').val()); 
} 
}); 

и использовать это в качестве параметра в моей категории помощнике:

categories: function(elementId) { 
    return getFormCategories(dict.get('activeElementId')); 
    } 

Надеется, что это помогает кто-то другой, имеющим подобный вопросу.