如何使用相同的表单使用 quickForm 更新/插入记录？答案

【问题标题】：How to use the same form for updating/inserting records using quickForm?如何使用相同的表单使用 quickForm 更新/插入记录？
【发布时间】：2014-10-11 23:44:49
【问题描述】：

我有这个 Meteor 模板：

<template name="personalDetailsForm">

 {{> quickForm collection="PersonalDetails" id="personalDetailsForm" type="insert"}}
 {{> quickForm collection="PersonalDetails" doc=editingDoc id="personalDetailsForm" type="update"}}

</template>

表单按我的预期显示，但我只想要一个表单。提交表单时没有插入数据的空白表单。然后，当重新加载表单时，先前提交的数据会显示在表单上。如果再次提交表单，任何已更改的数据都将被更新。

目前正在显示插入表单，在其下方显示更新表单，其中包含先前插入的数据。尝试更新第二个表单上的数据不起作用，而是插入一条新记录。我想这可能是因为表单 ID 相同。

理想情况下，我想做这样的事情：

<body>
{{#if PersonalDetails}}
    {{> personalDetailsFormUpdate}}
{{ else }}
    {{> personalDetailsFormInsert}}
{{/if}}
</body>

<template name="personalDetailsFormInsert">
 {{> quickForm collection="PersonalDetails" id="personalDetailsFormInsert" type="insert"}}
</template>


<template name="personalDetailsFormUpdate">
 {{> quickForm collection="PersonalDetails" doc=editingDoc id="personalDetailsFormUpdate" type="update"}}
</template>

我认为这部分文档是我正在寻找的：

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

是的。您在状态之间翻转的代码应按此顺序执行以下操作：

Change the type attribute's value to "insert" or "update" as appropriate, probably by updating a reactive variable.
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.
Call AutoForm.resetForm(formId). This will clear any existing validation errors for the form.

谁能举个例子？

【问题讨论】：

标签： javascript meteor

【解决方案1】：

前段时间有人问过这个问题，但我遇到了同样的问题，刚刚解决了。

这很容易：

照常获取上下文数据。例如。使用 Iron-router，构建如下路线：

Router.route('Options', {
  path: 'options',
  data: function() {
    var options = Options.findOne({owner: Meteor.userId()});
    return options;
  }
});

构建一个新的助手，检查上下文数据（助手中的 this）是否为空（示例是适用于每个模板的全局助手）：

UI.registerHelper("formType", function(){

  if(_.isEmpty(this)) {
    return 'insert'
  } else {
    return 'update';
  }

});

使用新助手设置模板：

<template name="Options">
<h1>Options</h1>
{{> quickForm collection="Options" doc=this id="optionsForm" type=formType omitFields="owner"}}
</template>

现在一切都应该正常了。如果数据库没有返回值，表单将自动切换到插入。所以在我的例子中，如果你第一次打开表单，它将使用插入。第二次，它将使用更新。

【讨论】：

谢谢，这是让它发挥作用的正确理论。

【解决方案2】：

感谢@peXd。这很有帮助。但是，我的架构中有一个额外的必填字段，它阻止了插入，并且它默默地无法插入，因为我通过 8 个活板门偶然发现了这个解决方案，我想我会发布它以防它帮助其他人。

我从 aldeed [https://github.com/aldeed/meteor-autoform/issues/199] 找到了在客户端代码中使用此错误挂钩的建议：

AutoForm.addHooks(null, {
  onError: function (name, error, template) {
     console.log(name + " error:", error);
  }
});

但是这也失败了，我说 AutoForm 没有定义。这对我来说很奇怪，因为 aldeed:autoform 作为依赖项被拉入项目。但只是为了仔细检查，我做了 meteor add aldeed:autoform 直接将其拉入，突然 AutoForm 可用于添加钩子。

【讨论】：