meteor - 自动形成: How to dynamically show and add fields of a sub-schema depending on another field?

根据另一个字段动态显示子模式(对象)的字段的最佳方法是什么？
在下面的示例中，文档(Schemas.Main)可以包含Schemas.Items中定义的多个项目。填写项目所需的字段取决于所选的类型。

例如，如果用户选择type ==“type1”，则必须填写字段“type1_field1”和“type1_field2”。

一个解决方案可能需要使用autoForm并将AutoForm.getFieldValue和afArrayField的设置字段结合起来，对吗？我尝试了很多组合，但是添加其他项的功能丢失了(缺少加号)，或者我无法添加其他项(即所有项均为type1)。任何提示如何解决这个问题？

//Schemas.js
Schemas = {}; Collections = {};
Main = Collections.Main = new Mongo.Collection("Main");
Main.attachSchema(Schemas.Main);
Meteor.isClient && Template.registerHelper("Schemas", Schemas);

Schemas.Main = new SimpleSchema({
  name: {
    type: String
  },
  items: {
    type: [Schemas.Items]
  }
});

Schemas.Items = new SimpleSchema({
      type: { //FormActions...
          type: String,
          allowedValues: ['type1', 'type2', 'type3'],
          autoform: {
              type: "selectize"
          }
      },
      type1_field1: {
        type: String
      },
      type1_field2: {
        type: String
      },
      type2_field1: {
        type: String
      },
      type2_field2: {
        type: String
      },
      type3_field1: {
        type: String
      },
      type3_field2: {
        type: String
      }
});

//form.html
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
     {{> afFieldInput name='name'}}

     {{> afArrayField name='items' fields="items.$.type, items.$.type1_field1"}} //How to set these fields dynamically depending on type?

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Create</button>
    </div>
{{/autoForm}}

最佳答案

我最终使用了另一种方法，并基于afArrayField创建了自己的模板，该模板使用

{{> UI.dynamic template=currentFieldValue}}

不知道这是否是最好的方法，但似乎适合我的情况:

Template.registerHelper("currentFieldValue", function() {
  return AutoForm.getFieldValue("testForm", this.current.type) || "no type so far";
});



{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
  {{> afFieldInput name='name'}}
  {{> afArrayField name='items' id="something" template="mycustom"}}
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Create</button>
  </div>
{{/autoForm}}

<template name="afArrayField_mycustom">
  <div class="panel panel-default">
    <div class="panel-heading">{{afFieldLabelText name=this.atts.name}}</div>
    {{#if afFieldIsInvalid name=this.atts.name}}
    <div class="panel-body has-error">
      <span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
    </div>
    {{/if}}
    <ul class="list-group">
      {{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
      <li class="list-group-item autoform-array-item">
        <div>
          <div class="autoform-remove-item-wrap">
            {{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
            <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span>
            </button>
            {{/if}}
          </div>
          <div class="autoform-array-item-body">
            <!--all actions have a type -->
            {{> afFieldInput name=this.current.type label=false options="auto"}}
            <!--branch here for other fields that depend on type -->
            {{> UI.dynamic template=currentFieldValue}}
          </div>
        </div>
      </li>
      {{/afEachArrayItem}}
      {{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
      <li class="list-group-item">
        <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span>
        </button>
      </li>
      {{/if}}
    </ul>
  </div>
</template>

<template name="type1">
  <!--include type1 fields here-->
</template>

<template name="type2">
  <!--include type2 fields here-->
</template>

<template name="type3">
  <!--include type3 fields here-->
</template>

关于meteor - 自动形成: How to dynamically show and add fields of a sub-schema depending on another field?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28993302/