Question

我正在尝试使用autoform来更新集合中的数组对象。该集合包含大量信息，但是使用此表单我只想更新职业历史。我希望能够使用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}}

现在，您可以使用所需的任何机制设置字段样式。请注意，在以这种方式构建表单时，您必须添加自己的“添加”和“删除”按钮。我已经在上面添加了默认的添加/删除。

请参阅default template以获取完整的引导样式示例。

Autoform引用数组中的特定字段

1 个答案: