6

私は非常に単純であるべき何かへの答えを求めてSOの質問をトロールしてきましたが、私の人生ではそれを理解することはできません.

基本的に、2 つの選択コントロールを持つ meteor-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 が選択されたときに、選択された elementId に基づいて 2 番目のオプションのリストが更新されることです。

どんな助けでも大歓迎です。

ありがとう、デビッド

4

2 に答える 2

13

以前は同じ問題があり、解決するのに何時間もかかりました。オートフォームの 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
} 
});

ところで、5.0 で Autoform.getFieldValue を使用するときに問題が発生したため、私はまだ autoform@4.2.2 を使用しています。

5.0.3 の問題を aldeed に報告しました: https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515

于 2015-03-23T03:43:36.693 に答える
5

私はこれを機能させることができました-いくつかのことが間違っていました:

  1. 最初の選択コントロールに「id」を追加して、変更イベントをキャプチャできるようにする必要がありました。

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

次に、Reactive Dict 変数を使用し、それを changed イベントに設定しました。セッション変数はおそらく同じ仕事をします。

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

これを私のカテゴリヘルパーのパラメータとして使用します:

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

うまくいけば、これは同様の問題を抱えている他の人に役立ちます。

于 2015-02-23T23:24:35.187 に答える