在Meteor中单击个人资料页面上的编辑时显示表单

Question

在许多页面上，我可以看到我的用户个人资料页面，然后单击链接以编辑我的个人资料页面上的一些信息。 例如，在Facebook上，我可以在“关于”页面上看到有关我自己的信息，如果单击“编辑”，该小部分将变为表单输入。

我如何最好地使用meteor-autoform来实现相同的行为？

我可以用

{{> quickForm id=id collection=collection fields="firstName,middleName,lastName"}}

显示表格。

但是，当用户单击“编辑”时，如何首先隐藏该表单并首先显示它呢？ 如果我有4个部分，每个部分都包含一些信息和单独的表格（全名，生日，学历，工作经历），那么我应该在<div style="display:none">元素内以及何时何时打印带有meteor-autoform表格的4个表格meteor-autoform用户单击“编辑”，隐藏带有信息的div并显示表格，反之亦然？

我想它可以做得更流畅，只有在用户单击“编辑”时才渲染表单。 我只是不怎么整齐地做到这一点。

Answer 1

“流星方法”将是使用反应性助手，这取决于反应性值：

Template.profile.helpers({
  showProfileForm: function () {
    return Session.get('showProfileForm');
  }
});

然后在您的模板中，而不是丑陋的display: none您将使用把手：

{{#if showProfileForm}}
  {{> quickForm id=id collection=collection fields="firstName,middleName,lastName"}}
{{/if}}

从那里，您可以只更改showProfileForm会话变量的状态（例如在事件函数中），然后您的助手将相应地更改其返回值：

Template.profile.onCreated(function () {
  Session.set('showProfileForm', false); // to avoid undefined at first
});

Template.profile.events({
  'click a#showHideForm': function(e, template) {
    Session.set('showProfileForm', !Session.get('showProfileForm'));
  }
});

如果您不喜欢为此使用Session，David Weldon撰写了一篇很好的文章，介绍了如何为像这样的助手使用反应变量而不是Session变量。