在Meteor中单击“在配置文件上编辑”页面时显示表单

Question

在许多页面上，我可以看到我的用户配置文件页面，并单击一个链接来编辑我的配置文件页面上的一些信息。例如，在Facebook上，我可以在about页面上看到关于我自己的信息，如果我单击“编辑”，小部分就会更改为形成输入。

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

我可以用

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

来展示表格。

但是，我最初如何隐藏表单，并在用户单击“编辑”时首先显示它呢？如果我有4个部分，每个部分都有一些信息和一个单独的表单(全名、生日、教育、工作经验)，那么我应该在一个meteor-autoform元素中打印4个带有<div style="display:none">的表单吗?当用户单击编辑时，包含信息的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'));
  }
});

如果您不喜欢为此使用会话，David编写了一件好作品，介绍如何使用反应性变量而不是会话变量来帮助类似这样的助手。