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

Question

在很多页面上，我可以看到我的用户个人资料页面，然后单击 link 可以在我的个人资料页面上编辑一些信息。例如，在 Facebook 上，我可以在关于页面上看到关于我自己的信息，如果我点击编辑，这个小部分就会变成表单输入。

我怎样才能最好地使用 meteor-autoform 实现相同的行为？

我可以用

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

显示表格。

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

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

Answer 1

"meteor way" 将使用反应性助手，这取决于反应性值：

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 会话变量的状态（例如在事件函数中），您的助手将响应地更改其 return 值：

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 关于如何为像这样的助手使用反应变量而不是 Session 变量的文章。

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

Show form when clicking edit on profile page in Meteor

javascript

forms

node.js

meteor

meteor-autoform