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

Question

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

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

我可以使用

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

显示表单。

但是我如何最初隐藏表单并在用户单击编辑时首先显示它？如果我有 4 个部分，每个部分都有一些信息和一个单独的表格(全名、生日、教育背景、工作经验)，那么我应该打印 4 个带有 meteor-autoform 的表格吗？里面 <div style="display:none">元素，当用户单击编辑时，包含信息的 div 会隐藏并显示表单，反之亦然？

我想它可以做得更流畅，仅在用户单击编辑时才渲染表单。我只是不知道如何巧妙地做到这一点。

Answer 1

“ meteor 方式”是使用响应式(Reactive)助手，它取决于 react 值:

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

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

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

从那里，您可以更改 showProfileForm session 变量的状态(例如在事件函数中)，并且您的帮助程序将 react 性地更改其返回值:

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 写道 a nice piece关于如何为像这样的帮助程序使用 react 变量而不是 session 变量。