javascript - 填充 MeteorJS Autoform 字段

Question

我在 Meteor ( https://github.com/aldeed/meteor-autoform ) 中使用非常好的 Autoform 包。我的响应式(Reactive)表单工作得很好——但我想填充表单数据以允许根据用户在表中选择一行进行编辑。可以在这里找到非常简单的示例:

http://autoform.meteor.com/insertaf

实际上，我想用用户单击进行编辑的“人员”行中的数据填充表单数据，但不确定如何执行此操作。任何有关如何执行此操作的示例将不胜感激。谢谢!

表单代码:

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}
  <div class="form-group {{#if afFieldIsInvalid name='firstName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='firstName'}}</label>
    {{> afFieldInput name='firstName'}}
    {{#if afFieldIsInvalid name='firstName'}}
    <span class="help-block">{{{afFieldMessage name='firstName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='lastName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='lastName'}}</label>
    {{> afFieldInput name='lastName'}}
    {{#if afFieldIsInvalid name='lastName'}}
    <span class="help-block">{{{afFieldMessage name='lastName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='age'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='age'}}</label>
    {{> afFieldInput name='age'}}
    {{#if afFieldIsInvalid name='age'}}
    <span class="help-block">{{{afFieldMessage name='age'}}}</span>
    {{/if}}
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Add Person</button>
    <button type="reset" class="btn btn-default">Reset Form</button>
  </div>
{{/autoForm}}

meteor Javascript

Schemas = {};

UI.registerHelper("Schemas", Schemas);

Schemas.Person = new SimpleSchema({
  firstName: {
    type: String,
    index: 1,
    unique: true
  },
  lastName: {
    type: String,
    optional: true
  },
  age: {
    type: Number,
    optional: true
  }
});

var Collections = {};

UI.registerHelper("Collections", Collections);

People = Collections.People = new Mongo.Collection("People");
People.attachSchema(Schemas.Person);

Meteor.publish(null, function () {
  return People.find();
});

People.allow({
  insert: function () {
    return true;
  },
  remove: function () {
    return true;
  }
});

Answer 1

改变

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}

到

{{#autoForm id="afUpdateDemo" type="update" doc=someDoc collection=Collections.People}}

因此，您需要将 type 属性从 insert 更改为 update，并添加一个 doc 属性来告诉自动表单它将更新哪个文档。您可以从模板助手返回 doc。

autoform 组件的 autoform 文档位于 https://github.com/aldeed/meteor-autoform#autoform-1将 type 和 doc 属性解释为:

type: Optional. One of "insert", "update", or "method". Setting the type to anything else or omitting it will call any onSubmit hooks, where you can do custom submission logic. If onSubmit does not return false or call this.event.preventDefault(), the browser will also submit the form. This means that you can use AutoForm to generate and validate a form but still have it POST normally to some non-Meteor HTTP endpoint.

doc: Required for an update form, and must have at least an _id property. Pass the current document object, retrieved with a call to findOne() for example. For an insert form, you can also use this attribute to pass an object that has default form values set (the same effect as setting a value attribute on each field within the form).

注意:我还更改了 id 属性，以便您稍后可以单独引用此表单。但是有一些方法可以重复使用单个表单进行更新/插入，如 https://github.com/aldeed/meteor-autoform#can-i-reuse-the-same-quickform-or-autoform-for-both-inserts-and-updates 中所述。

Can I reuse the same quickForm or autoForm for both inserts and updates?

Yes. Your code that flips between states should do the following in this order:

1. Change the type attribute's value to "insert" or "update" as appropriate, probably by updating a reactive variable.

2. Change the doc attribute's value to the correct document for an update or to null (or a document containing default values) for an insert, probably by updating a reactive variable.

3. Call AutoForm.resetForm(formId). This will clear any existing validation errors for the form.