填充 MeteorJS Autoform 字段

Question

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

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}}

流星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属性从插入更改为更新，并添加一个doc属性来告诉自动表单它将更新哪个文档。您可以doc从模板助手中返回。

https://github.com/aldeed/meteor-autoform#autoform-1 上的autoform组件的 autoform 文档将和属性解释为：typedoc

type： 可选的。“插入”、“更新”或“方法”之一。将 设置 type为其他任何内容或省略它会调用任何onSubmit钩子，您可以在其中执行自定义提交逻辑。如果onSubmit不返回 false 或 call this.event.preventDefault()，浏览器也会提交表单。这意味着您可以使用 AutoForm 生成和验证表单，但仍然可以将其正常 POST 到某些非 Meteor HTTP 端点。

doc：更新表单所必需的，并且必须至少具有一个_id 属性。传递当前文档对象，findOne()例如通过调用检索 。对于插入表单，您还可以使用此属性传递设置了默认表单值的对象（与在表单中的每个字段上设置值属性的效果相同）。

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

我可以为插入和更新重复使用相同的 quickForm 或 autoForm 吗？

是的。在状态之间切换的代码应按以下顺序执行以下操作：

1. 根据需要将 type 属性的值更改为“插入”或“更新”，可能是通过更新反应变量。

2. 将 doc 属性的值更改为更新的正确文档或插入的 null（或包含默认值的文档），可能是通过更新反应变量。

3. 调用 AutoForm.resetForm(formId)。这将清除表单的任何现有验证错误。