javascript - meteor :注册表格有时无法正确呈现

Question

一些用户(包括我)根本看不到注册表单 - 特别是在 chrome 中。

请先在 Firefox 中查看: http://openstrategynetwork.com/joinus

Chrome 中发生了什么:

只有当您将鼠标悬停在该区域上时，按钮和输入字段才会开始出现:

或者在调整浏览器窗口大小时显示所有内容。

最奇怪——也有点怪异——当我向上滚动时，我在后台看到注册表单:

我正在使用 useraccounts 包。

注意:这里是all source .

我的配置文件(config/at_config.js):

// Options
AccountsTemplates.configure({
  // preSignUpHook: function (error, state) {
  //   console.log("love");
  // },
  // defaultLayout: 'emptyLayout',
  focusFirstInput: false,
  showForgotPasswordLink: true,
  overrideLoginErrors: true,
  enablePasswordChange: true,

  sendVerificationEmail: true,
  // enforceEmailVerification: true,
  //confirmPassword: true,
  //continuousValidation: false,
  showLabels: false,
  //forbidClientAccountCreation: true,
  //formValidationFeedback: true,
  homeRoutePath: '/',
  redirectTimeout: 2000,
  //showAddRemoveServices: false,
  showPlaceholders: true,

  negativeValidation: true,
  positiveValidation: true,
  negativeFeedback: true,
  positiveFeedback: true,

  // Privacy Policy and Terms of Use
  //privacyUrl: 'privacy',
  //termsUrl: 'terms-of-use',
  texts: {
    sep: "OR REGISTER with your social account:",
    title: {
      signUp: "REGISTER by creating a new account:"
    },
    button: {
      signUp: "REGISTER"
    },
    socialSignUp: "",
    socialWith: ""
  }
});

var submitFunction = function(error, state){
  // if (!error) {
  //   if (state === "signIn") {
  //     // Successfully logged in
  //     console.log("hook logged in");
  //   }
  //   if (state === "signUp") {
  //     // Successfully registered
  //     console.log("hook singup");
  //   }
  // }
};


// remove fields and add them back in the right order
AccountsTemplates.removeField('email');
AccountsTemplates.removeField('password');


//all register fields
AccountsTemplates.addFields([
    {
      _id: 'firstName',
      type: 'text',
      placeholder: "First Name*",
      required: true,
      re: /^[^\d]{2,}$/i,
      errStr: "Please enter your first name.",
    },
    {
      _id: 'lastName',
      type: 'text',
      placeholder: "Last Name*",
      required: true,
      re: /^[^\d]{2,}$/i,
      errStr: "Please enter your last name.",
    },
    {
      _id: 'email',
      type: 'email',
      placeholder: "Email Address*",
      required: true,
      displayName: "email",
      re: /.+@(.+){2,}\.(.+){2,}/,
      errStr: 'Invalid email',
    },
    {
      _id: 'institution',
      type: 'text',
      placeholder: "Institution/Company*",
      required: true,
      // re: /^[^\d]{2,}$/i,
      minLength: 2,
      errStr: "Please enter the institution or company you work for.",
    },
    {
      _id: 'interests',
      type: 'text',
      placeholder: "Interests regarding Open Strategy*",
      required: true,
      re: /^[^\d]{2,}$/i,
      errStr: "Please enter the your interests in the institution/company.",
      template: 'interests'
    },
    {
      _id: 'position',
      type: 'text',
      placeholder: "Position",
      re: /^[^\d]{2,}$/i,
      errStr: "Please enter the your position in the institution/company.",
    },
    {
      _id: 'uploadProfile',
      type: 'text',
      template: 'uploadInput'
    },
    {
      _id: 'password',
      type: 'password',
      placeholder: "Password*",
      required: true,
      minLength: 6,
      errStr: 'Password must be at least six characters long',
    },
    {
      _id: 'password_again',
      type: 'password',
      placeholder: "Confirm Password*",
      required: true,
      minLength: 6,
      errStr: 'Password must be at least six characters long',
    }
]);

我的助手文件(client/templates/account-templates/joinus.js):

Template.joinUs.onRendered(function () {
  // if scrolling is necessary $("html, body").animate({ scrollTop: 0 });
  window.scrollTo(0, 0);
  // SCRIPT
    setInterval(function(){
        if(window.location.href.split('/').pop()=='joinus'){
            var pswVal = $("[name='at-field-password']")[0].value;
            var pswValL = pswVal.length;
            var pswAVal = $("[name='at-field-password_again']")[0].value;
            var pswAValL = pswAVal.length;
            if(pswVal==pswAVal && pswValL>5 && pswAValL>5){
                $('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok').css("color","green");
                $('.form-group:eq(15) .help-block').addClass('hide');
                $("[name='at-field-password_again']").css({"border-style":"solid", "border-color":"green"})
            }else{
                $("[name='at-field-password_again']").css({"border-style":"", "border-color":""});
                $('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-ok').css("color","");
                $('.form-group:eq(15) .help-block').removeClass('hide');
            }
        }   
    }, 10);
});

Template.joinUs.events({
  'click .js-scrollToForm': function (evt, tpl) {
    evt.preventDefault();
    $('html, body').animate({
        scrollTop: $('#js-scrollStop').offset().top - 35
    }, 2000);
  }
});

我的 html 文件 (client/templates/account-templates/joinus.html):

<template name="joinUs">

  <!-- Stage -->
  <header>
    <div class="header-content">
        <!-- Breadcrumb -->
        <ol class="breadcrumb text-left">
            <li><a class="breadcrumb-link" href="{{pathFor route = 'home'}}">Home</a></li>
            <li class="active">Join us</li>
        </ol><!-- End of Breadcrumb -->
        <div class="header-content-inner">
            <h1>YOUR BENEFITS</h1>
            <hr>
            <h2>As a member of OSN you will become part of a thriving network of scholars interested in open strategy. There are many advantages of joining the OSN. Registration is free.</h2>
            <button type="button" href="#joinus" class="btn btn-primary btn-xl page-scroll js-scrollToForm">JOIN US</button>
        </div>
    </div>
  </header> <!-- ./Stage -->

  <!-- Services Section -->
  <section id="services">
    <div class="container">
        <div class="row text-center extra-spacing-top extra-spacing-bottom joinus-icons">
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x"></i> -->
                    <i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">News</h4>
                <p class="text-muted">As a member you can submit news to the whole Open Strategy community and disseminate related research findings.</p>
            </div>
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
                    <i class="fa fa-comments-o fa-stack-1x fa-inverse joinus-icons"></i>
                </span>
                <h4 class="service-heading">Collaborations</h4>
                <p class="text-muted">Collaborate internationally by searching for data on OSN members.</p>
            </div>
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
                    <i class="fa fa-newspaper-o fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Literature</h4>
                <p class="text-muted">Search for Open Strategy literature on specific topics within the Bibliography</p>
            </div>
        </div>
    </div>
  </section>

  <!-- <div id="js-scrollStop"></div> -->

  <!--     Registration Form -->
  <section class="bg-light-gray extra-spacing-top" id="js-scrollStop">
    <div class="container">
        <form>
            {{> atForm state='signUp'}}
        </form>
    </div>
  </section>
</template>

编辑:

感谢@Jeremy Iglehart，错误可能归结为这个文件:

client/templates/account-templates/at_form_mod.html:

<template name="myAtForm">
  {{#unless hide}}
    <div class="at-form">
      <!-- {{#if showTitle}}
        {{> atTitle}}
      {{/if}} -->
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}
      {{#if showPwdForm}}
        {{> atPwdForm}}
      {{/if}}
      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
      {{#if showOauthServices}}
        {{> atOauth}}
      {{/if}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
  {{/unless}}
</template>

可以在此处找到 .less 文件(太长，无法粘贴到此处): 客户端/模板/样式/styles.less

Answer 1

Amir，我不知道为什么 Chrome 会给你带来问题。

如果我是你，我会编辑它。除非你真的需要那个“隐藏”，否则我会去掉所有这些 if 语句。在我看来，您的设计希望该页面始终处于打开状态。

从模板层面把你不想要的东西去掉，看看你得到了什么。

这是一个黑客，但它可能会让你感动。

例如:

<template name="myAtForm">
    <div class="at-form">
        {{> atTitle}}
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}

        {{> atPwdForm}}

      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
        {{> atOauth}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
</template>

把不需要的东西拿出来。