此代码不起作用（无缘无故）？

Question

此代码来自本教程：https://waaave.com/tutorial/meteor/design-a-complete-authentication-system-with-meteor/#L11

这是第 6.1 步，据我所知，没有错误，但由于某种原因它不起作用，并且当我单击“忘记密码”链接时，它没有任何作用。有谁知道怎么回事？

Javascript：

Template.main.helpers({
    showForgotPassword: function() {
        return Session.get('showForgotPassword');
    }
});

// Sign In Template
Template.signIn.events({
    'submit #signInForm': function(e, t) {
        e.preventDefault();

        var signInForm = $(e.currentTarget),
            email = trimInput(signInForm.find('.email').val().toLowerCase()),
            password = signInForm.find('.password').val();

        if (isNotEmpty(email) && isEmail(email) && isNotEmpty(password) && isValidPassword(password)) {
            Meteor.loginWithPassword(email, password, function(err) {
                if (err) {
                    Session.set('alert', 'We\'re sorry but these credentials are not valid.');
                } else {
                    Sesson.set('alert', 'Welcome back New Meteorite!');

                }
            });
        }
        return false;
    },

      'click #showForgotPassword': function(e, t) {
        Session.set('showForgotPassword', true);
        return false;
    },

});

HTML：

<div id="topbar">
            {{> signOut}}
     {{#unless resetPassword}}
         {{#unless currentUser}}
             {{#unless showForgotPassword}}
             {{else}}
                  {{> forgotPassword}}
             {{/unless}}
         {{else}}
          {{/unless}}
     {{else}}
         {{> resetPassword}}
     {{/unless}}
    </div>

<template name="signIn">
            <a class="show-forgot-password" href="javascript:void(0);" id="showForgotPassword">Forgot Password?</a>
    <div class="sign-in" id="signIn">
        <form action="/signin" class="sign-in-form" id="signInForm" method="post">
            <input class="email" id="signInEmail" type="text" name="email" placeholder="Email">
            <input class="password" id="signInPassword" type="password" name="password" placeholder="Password">
            <input class="btn btn-success" id"signInButton" type="submit" value="Sign In">
        </form>
    </div>
    <!-- end .sign-in -->
</template>

<template name="signOut">
    <div class="connected">
        <a class="sign-out" href="/" id="signOut">Sign Out</a>
    </div>
    <!-- end .connected -->
</template>

<template name="signUp">
    <div class="sign-up">
        <form action="/sign-up" class="sign-up-form" id="signUpForm" method="post">
            <input class="username" id="signUpUsername" name="username" placeholder="Username" type="text" >
            <input class="email" id="signUpEmail" name="email" placeholder="Email" type="text" >
            <input class="password" id="signUpPassword" name="password" placeholder="Password" type="password">
            <input class="password-confirm" id="signUpPasswordConfirm" name="password-confirm" placeholder="Confirm" type="password">
            <input class="btn btn-success" type="submit" id="submit" value="Sign up for Chattly">
        </form>
    </div>
    <!-- end .sign-up -->
</template>

<template name="forgotPassword">
    <div class="forgot-password" id="forgotPassword">
        <a class="return-to-sign-in" href="javascript:void(0);" id="returnToSignIn">Return</a>
        <form action="/forgot" class="forgot-password-form" id="forgotPasswordForm" method="post">
            <input class="email" id="forgotPasswordEmail" type="text" name="email" placeholder="Email Address">
            <input class="btn-submit" type="submit" value="Send">
        </form>
    </div>
    <!-- end .forgot-password -->
</template>

<template name="resetPassword">
    <div class="reset-password">
        <h2 class="headline">You're now saved, <span class="bold">follow the light!</span></h2>
        <h3 class="details">You just have to type and confirm your new password to regain access to your dashboard.</h3>
        <form action="/reset-password" class="reset-password-form" id="resetPasswordForm" method="post">
            <input class="password" id="resetPasswordPassword" name="password" placeholder="Your New Password" type="password" >
            <input class="password-confirm" id="resetPasswordPasswordConfirm" name="password-confirm" placeholder="Confirm New Password" type="password" >
            <input class="btn-submit" type="submit" value="Reset">
        </form>
    </div>
    <!-- end .reset-password -->
</template>

Answer 1

在教程中的那个点 (6.1)，您还没有为 forgotPassword 配置任何事件处理程序。它不工作，因为代码还没有。

在以下 6.2 节中，作者将引导您发送电子邮件以启动密码恢复：

Template.forgotPassword.events({
    'submit #forgotPasswordForm': function(e, t) {
        e.preventDefault();

        var forgotPasswordForm = $(e.currentTarget),
            email = trimInput(forgotPasswordForm.find('#forgotPasswordEmail').val().toLowerCase());

        if (isNotEmpty(email) && isEmail(email)) {
            Accounts.forgotPassword({email: email}, function(err) {
                if (err) {
                    if (err.message === 'User not found [403]') {
                        Session.set('alert', 'This email does not exist.');
                    } else {
                        Session.set('alert', 'We\'re sorry but something went wrong.');
                    }
                } else {
                    Session.set('alert', 'Email Sent. Please check your mailbox to reset your password.');
                }
            });
        }
        return false;
    },

    'click #returnToSignIn': function(e, t) {
        Session.set('showForgotPassword', null);
        return false;
    },
});

这是我在最近的教程中看到的常见模式。

作者并没有在一开始就给你一个完整的应用程序并将其分解，而是采用迭代方法并逐个构建应用程序，如果你要构建应用程序，通常会这样做。

因此，它可以完美地用作教程。请耐心等待结束:)

更新： 忘记密码表单没有显示，因为它应该位于名为 main 的模板中，如下代码所示：

<template name="main">
    {{> alert}}
    {{#unless resetPassword}}
        {{#unless currentUser}}
            {{#unless showForgotPassword}}
                {{> signIn}}
                {{> signUp}}
            {{else}}
                {{> forgotPassword}}
            {{/unless}}
        {{else}}
            {{> signOut}}
        {{/unless}}
    {{else}}
        {{> resetPassword}}
    {{/unless}}
</template>

以下帮助程序获取会话参数并将其提供给unless 块：

Template.main.helpers({
    showForgotPassword: function() {
        return Session.get('showForgotPassword');
    }
});

但是您的代码没有 main 模板，而是将代码包装在通用 div 中，并且您似乎还更改了代码的其他部分。

<div id="topbar">
            {{> signOut}}
     {{#unless resetPassword}}
         {{#unless currentUser}}
             {{#unless showForgotPassword}}
             {{else}}
                  {{> forgotPassword}}
             {{/unless}}
         {{else}}
          {{/unless}}
     {{else}}
         {{> resetPassword}}
     {{/unless}}
    </div>

因此，您可以使用教程中的原始代码，或者如果您真的想更改该代码，可以将您的 topbar div 包装为 main template，如原始代码所示。