显示表单时，点击编辑的个人资料页面在流星

Show form when clicking edit on profile page in Meteor

本文关键字：个人资料 流星 编辑 表单 显示      更新时间：2023-09-26

在许多页面上，我可以看到我的用户配置页面，并点击链接来编辑我的配置页面上的一些信息。例如，在Facebook上，我可以在"关于"页面上看到关于我自己的信息，如果我点击编辑，这个小部分就会变成表单输入。

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

我可以用

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

显示表单

但是我如何在用户单击编辑时隐藏表单并首次显示它呢?如果我有4个部分，每个部分有一些信息和一个单独的表单(全名，生日，教育，工作经历)，那么我是否应该在<div style="display:none">元素中打印4个meteor-autoform表单，当用户单击编辑时，包含信息的div隐藏并显示表单，反之亦然?

我想它可以做得更流畅，只有在用户点击编辑时才呈现表单。我只是不知道该怎么写。

"流星方式"是使用一个响应式助手，它依赖于一个响应值:

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

然后在你的模板，而不是一个丑陋的display: none，你将使用Handlebars:

{{#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变量作为像这样的帮助器

相关文章：