Autoform 引用数组中的特定字段

Question

我正在尝试使用自动表单来更新集合中的数组对象。该集合包含大量信息，但是使用此表单我只想更新 careerHistory。我希望能够使用 bootstrap 列来控制表单的布局。为此，我需要能够独立引用 careerHistory.$.company 和 careerHistory.$.title。目前，我只能通过引用 name="careerHistory" 来呈现表单。每当我尝试引用数组中的特定字段时，表单都不会打印。

路径：Profile.js

import { Mongo } from 'meteor/mongo';
import SimpleSchema from 'simpl-schema';
import { addressSchema } from '../../sharedSchemas/addressSchema.js';

SimpleSchema.extendOptions(['autoform']);

export const Profile = new Mongo.Collection('Profile');

Profile.allow({
  insert: function(userId, doc) {
    return !!userId;
  },
  update: function(userId, doc) {
    return !!userId;
  },
  remove: function(userId, doc) {
    return !!userId;
  }
});    

Schemas.Profile = new SimpleSchema({
      userId: {
        type: String,
        optional: true
      },
      'careerHistory.$': Object,
      'careerHistory.$.company': {
        type: String,
        optional: false,
      },
      'careerHistory.$.title': {
        type: String,
        optional: true,
    });

Profile.attachSchema(Schemas.Profile);

路径：Profile.html

{{#autoForm collection=profileCollection doc=profile id="candidateCareerHistory" type="update"}}
  {{> afArrayField name="careerHistory"}}
{{/autoForm}}

路径：Profile.js

profile() {
  return Profile.findOne({userId: Meteor.userId()});
},
profileCollection() {
  return Profile;
}

Answer 1

如果您使用 afEachArrayItem 块助手并为您之后的特定字段构建图表，则可以执行此操作。这是一个例子。

{{#autoForm collection=Profile doc=profile id="candidateCareerHistory" type="update-pushArray" scope="careerHistory"}}
  {{#if afFieldIsInvalid name="careerHistory"}}
    <div class="panel-body has-error">
      <span class="help-block">{{{afFieldMessage name="careerHistory"}}}</span>
    </div>
  {{/if}}

  {{#afEachArrayItem name="careerHistory"}}
    <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button>
    {{> afFieldInput name=this.current.company}}  
    {{> afFieldInput name=this.current.title}}
  {{/afEachArrayItem}}
  <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="careerHistory"><span class="glyphicon glyphicon-plus"></span></button>
{{/autoForm}}

现在您可以使用您想要的任何机制来设计您的字段。请注意，以这种方式构建表单时，您必须添加自己的 "add" 和 "remove" 按钮。我在上面包含了默认值 add/remove。

请参阅 default template 以获得完整的 bootstrap 样式示例。

Autoform 引用数组中的特定字段

Autoform reference specific field within array

meteor

meteor-autoform

simple-schema