Question

我在Meteor中使用非常好的Autoform包（https://github.com/aldeed/meteor-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}}

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属性从插入更改为更新，并添加doc属性以告知autoform将更新哪个文档。您可以从模板助手返回doc。

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

type：可选。＆＃34;插入＆＃34;，＆＃34;更新＆＃34;或＆＃34;方法＆＃34;之一。设置   type对任何其他内容或省略它将调用任何onSubmit个钩子，   你可以在哪里做自定义提交逻辑。如果onSubmit没有返回   false或致电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-inserts-and-updates

中所述

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

是。在州之间翻转的代码应该执行以下操作   这个顺序：



将类型属性的值更改为＆＃34;插入＆＃34;或者＆＃34;更新＆＃34;适当时，可能通过更新反应变量。



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



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

填充MeteorJS Autoform字段

1 个答案: